javascript - 使用 Redux 和 React 添加关于焦点更改的类

Question

我正在尝试向 div 添加一个类，使用 Redux 和 React 将输入包装在焦点上。

我的 React 组件如下所示:

import React from 'react'

const Input = ({ value, onChange }) => (
  <div className="">
    <input type="email" onChange={onChange} value={value} />
  </div>
)

export default Input

当用户关注输入时，我希望将类 selected 添加到 div。该组件使用 react-redux 连接。

目前我尝试过的两种方式:

尝试 1

将 onFocus 监听器添加到输入并分派(dispatch)将输入焦点状态添加到输入状态的操作，例如:

{
  value: '',
  focused: true
}

如果 focused 为真，则添加带有 className={focused ? '已选择':''}

我对这种方法的担忧是，我可能会遇到多个输入具有 focused: true 的问题。所以我必须自己管理它并查看整个输入状态并在将焦点设置为新输入之前重置为 false。

尝试 2

向输入添加一个 onFocus 监听器并分派(dispatch)一个包含聚焦输入 ID 的操作，并将该 ID 存储在状态中。这将解决必须将所有其他输入重置为 false 的问题。

我担心的是我必须在唯一 ID 上提供我想要此功能的每个输入(这可能使用 Reacts ID)。我必须添加类似 className={ID === focusedID 的内容吗？ '已选择':'')

---

我觉得必须有更好的方法来实现这一目标。任何帮助将不胜感激。

谢谢

Answer 1

为此您甚至不需要 Redux，只需将“选中”状态存储在组件中即可。

像这样

var InputComp = React.createClass({
  getInitialState: function() {
   return {focus: false}
  },
  onFocus : function(){
        this.setState({focus: true})
  },
  onBlur: function(){
      this.setState({focus: false})
  },
  getClass: function(){
      if(this.state.focus === true)
        return "selected";
      else
        return "";
  },
  render: function() {
    var inputClass = this.getClass();
    return <div className={inputClass}><input onBlur={this.onBlur} onFocus={this.onFocus}/></div>
  }
});

ReactDOM.render(
  <InputComp/>,
  document.getElementById('container')
);

jsfiddle