Question

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

My 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
}

如果专注为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

Answer 2

您需要使用:focus伪选择器。您需要在div中添加一个类，例如，可以集中精力。如果这样做，您需要这个CSS规则：

.focusable:focus {
    /* Your rules for selected */
}

使用Redux和React

尝试1

尝试2

2 个答案: