用React聚焦div元素

Question

是否可以使用该focus()方法聚焦div(或任何其他元素)？

我已将tabIndex设置为div元素:

<div ref="dropdown" tabIndex="1"></div>

当我点击它时,我可以看到它变得集中,但是,我正在尝试像这样动态聚焦元素:

setActive(state) {
  ReactDOM.findDOMNode(this.refs.dropdown).focus();
}

或者像这样:

this.refs.dropdown.focus();

但是,当触发事件时,组件不会获得焦点.我怎样才能做到这一点？我可以使用其他(非输入)元素吗？

编辑:

嗯,这似乎有可能做到:https://jsfiddle.net/69z2wepo/54201/

但它不适合我,这是我的完整代码:

class ColorPicker extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      active: false,
      value: ""
    };
  }

  selectItem(color) {
    this.setState({ value: color, active: false });
  }

  setActive(state) {
    this.setState({ active: state });
    this.refs.dropdown.focus();
  }

  render() {
    const { colors, styles, inputName } = this.props;

    const pickerClasses = classNames('colorpicker-dropdown', { 'active': this.state.active });

    const colorFields = colors.map((color, index) => {
      const colorClasses = classNames('colorpicker-item', [`colorpicker-item-${color}`]);

      return (
        <div onClick={() => { this.selectItem(color) }} key={index} className="colorpicker-item-container">
          <div className={colorClasses}></div>
        </div>
      );
    });

    return (
      <div className="colorpicker">
        <input type="text" className={styles} name={inputName} ref="component" value={this.state.value} onFocus={() => { this.setActive(true) }} />
        <div onBlur={() => this.setActive(false) } onFocus={() => console.log('focus')} tabIndex="1" ref="dropdown" className={pickerClasses}>
          {colorFields}
        </div>
      </div>
    );
  }
}

Answer 1

每次设置状态时,React都会重新绘制组件,这意味着组件失去焦点.在这种情况下,如果要基于prop或state元素聚焦元素,则使用componentDidUpdate或componentDidMount方法很方便.

请记住,根据React Lifecycle文档,componentDidMount只有在屏幕上第一次呈现组件后才会发生,并且在此调用中componentDidUpdate不会发生,然后对于每个新的setState,forceUpdate调用或接收新props的组件,componentDidUpdate将发生调用.

componentDidMount() {
  this.focusDiv();
},
componentDidUpdate() {
  if(this.state.active)
    this.focusDiv();
},
focusDiv() {
  ReactDOM.findDOMNode(this.refs.theDiv).focus();
}

这是一个你可以玩的JS小提琴.

Answer 2

这就是问题：

this.setState({ active: state });
this.refs.component.focus();

设置状态正在重新呈现您的组件，并且调用是异步的，因此您正在关注，它只是在聚焦之后立即重新呈现，而您失去了焦点。尝试使用setState回调

this.setState({ active: state }, () => {
   this.refs.component.focus();
});