ReactJS：如何在进入DOM时将焦点设置为input-element？

Question

如何在焦点进入DOM时将焦点设置为input元素？

方案

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

代码段

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

在componentDidMount和componentDidUpdate挂钩中执行此操作：

ReactDOM.findDOMNode(this.refs.myInput).focus()

Answer 2

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

<input type="text" autofocus/>

应该做的伎俩，不需要JS！

Answer 3

你应该使用ref

<input ref={(input) => { this.inputSearch = input; }} defaultValue="search ... " />

并使用此代码进行焦点

this.inputSearch.focus();

Answer 4

来自文档：

“findDOMNode仅适用于已安装的组件（即已放置在DOM中的组件）。如果您尝试在尚未安装的组件上调用此方法（如在render（）中调用findDOMNode（）一个尚未创建的组件）将抛出异常。“

如Piyush.kapoor所述，您需要将其放在passport.authenticate和/或componentDidMount中。

Answer 5

我必须将变量定义为HTMLInputElement 1st ...

private inputSearch: HTMLInputElement;

然后将其添加到控件中：

ref={(input) => { this.inputSearch = input; }} 

当我可以开始构建/工作时：

this.inputSearch.focus();