ReactJS:当输入元素进入 DOM 时如何将焦点设置到输入元素？

Question

当 input 元素进入 DOM 时，如何将焦点设置到它？

场景

当单击按钮时，将显示输入元素。如何将焦点设置到该元素？

代码片段

class Component extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      showInput: false
    }
  }

  render() {
      return (
        <div>
          <div onClick={() => {
              this.setState({showInput: true});
              ReactDOM.findDOMNode(this.refs.myInput).focus() // <- NOT WORKING
          }}>
            Show Input
          </div>
          {
            (this.state.showInput) ? (
                <input
                    type="text"
                    ref="myInput"
                />
            ) : ""
          }  
        </div>
      );
  }
}

状态更改后调用 ReactDOM.findDOMNode(this.refs.myInput).focus() 不起作用。另外，仅更改状态更改时的 style 或 type 属性不起作用。

Answer 1

假设您一次只需要在页面上进行一个可见输入即可实现自动对焦 Poh Zi How's使用autofocus的建议可能是最简单的。

<input type="text" autofocus/>

应该可以解决问题，不需要 JS!