渲染后将焦点设置在输入上 [英] Set focus on input after render

问题描述

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

What's the react way of setting focus on a particular text field after the component is rendered?

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

Documentation seems to suggest using refs, e.g:

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

Set ref="nameInput" on my input field in the render function, and then call:

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

但我应该在哪里打个电话？我已经尝试了几个地方，但我无法让它工作。

But where should I call this? I've tried a few places but I cannot get it to work.

推荐答案

你应该在 componentDidMount 和 改为回拨 。这样的东西

You should do it in componentDidMount and refs callback instead. Something like this

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>

这篇关于渲染后将焦点设置在输入上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！