渲染后如何在输入字段上设置焦点？

小编典典

渲染后如何在输入字段上设置焦点？

reactjs

呈现组件后，将焦点设置在特定文本字段上的反应是什么？

文档似乎建议使用引用，例如：

ref="nameInput"在渲染函数中的输入字段上进行设置，然后调用：

this.refs.nameInput.getInputDOMNode().focus();

但是我应该在哪里称呼它？我已经尝试了几个地方，但无法正常工作。

阅读 364

2020-07-22

共1个答案

小编典典

您应该这样做，componentDidMount而refs callback不是。像这样

componentDidMount(){
   this.nameInput.focus(); 
}



class App extends React.Component{

  componentDidMount(){

    this.nameInput.focus();

  }

  render() {

    return(

      <div>

        <input

          defaultValue="Won't focus"

        />

        <input

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

          defaultValue="will focus"

        />

      </div>

    );

  }

}



ReactDOM.render(<App />, document.getElementById('app'));


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>

<div id="app"></div>

2020-07-22