使用Redux和React在焦点更改上添加类

Question

我正在尝试使用Redux和React将一个类添加到包含焦点输入的div.

我的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侦听器添加到输入并调度将输入焦点状态添加到输入状态的操作,例如:

{
  value: '',
  focused: true
}

如果focus为true,则添加类 className={focused ? 'selected' : ''}

我对这种方法的关注是我可以解决多个输入所具有的问题focused: true.所以我必须自己管理并查看整个输入状态并重置为false,然后再将焦点放在新输入上.

尝试2

将onFocus侦听器添加到输入并分派包含焦点输入的ID的操作,并将ID存储在该状态中.这将解决必须将所有其他输入重置为false的问题.

我对此的关注是我必须在一个唯一的ID上提供我希望此功能的所有输入(这可能使用Reacts ID).我必须添加类似的东西className={ID === focusedID ? 'selected' : '')

---

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

谢谢

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