用React聚焦div元素 [英] Focusing div elements with React

问题描述

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

Is it possible to focus div (or any other elements) using the focus() method?

我已将tabIndex设置为div元素：

I've set a tabIndex to a div element:

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

当我点击它时，我可以看到它变得集中，但是，我正在尝试动态像这样关注元素：

And I can see it gets focused when I click on it, however, I'm trying to dynamically focus the element like this:

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

或者像这样：

this.refs.dropdown.focus();

但触发事件时组件无法获得焦点。我怎样才能做到这一点？我可以使用其他（非输入）元素吗？

But the component doesn't get focus when the event is triggered. How can I do this? Is there any other (not input) element I can use for this?

编辑：

嗯，它看来这实际上可以做到： https://jsfiddle.net/69z2wepo/54201/

Well, It seems this it actually possible to do: https://jsfiddle.net/69z2wepo/54201/

但它不适合我，这是我的完整代码：

But it is not working for me, this is my full code:

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>
    );
  }
}

推荐答案

React每次设置状态时重新绘制组件，这意味着组件失去焦点。在这种情况下，如果要基于以下方式聚焦元素，可以方便地使用 componentDidUpdate 或 componentDidMount 方法。支柱或状态元素。

React redraws the component every time you set the state, meaning that the component loses focus. In this kind of instances it is convenient to use the componentDidUpdate or componentDidMount methods if you want to focus the element based on a prop, or state element.

请记住，根据React Lifecycle文档， componentDidMount 只会在以后发生首次在屏幕上呈现组件，并且在此调用 componentDidUpdate 中不会发生，然后对于每个新的 setState ， forceUpdate 调用或接收新道具的组件将发生 componentDidUpdate 调用。

Keep in mind that as per React Lifecycle documentation, componentDidMount will only happen after rendering the component for the first time on the screen, and in this call componentDidUpdate will not occur, then for each new setState, forceUpdate call or the component receiving new props the componentDidUpdate call will occur.

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

这是 JS小提琴你可以玩。

这篇关于用React聚焦div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！