如何设置焦点在一个输入字段后呈现?

在组件渲染后，react如何设置聚焦在特定文本字段上?

文档似乎建议使用参考，例如:

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

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

但是我该把它叫什么呢?我在几个地方试过了，但都不行。

当前回答

如果你只是想在React中自动对焦，这很简单。

<input autoFocus type="text" />

而如果你只是想知道把代码放在哪里，答案是componentDidMount()。

v014.3

componentDidMount() {
    this.refs.linkInput.focus()
}

在大多数情况下，您可以为DOM节点附加一个引用，而完全避免使用findDOMNode。

在这里阅读API文档:https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode

2015-12-04 05:03:35

其他回答

由于这个错误有很多原因，我想我也会发布我所面临的问题。对我来说，问题是我将我的输入呈现为另一个组件的内容。

export default ({ Content }) => {
  return (
  <div className="container-fluid main_container">
    <div className="row">
      <div className="col-sm-12 h-100">
        <Content />                                 // I rendered my inputs here
      </div>
    </div>
  </div>
  );
}

这是我调用上述组件的方式:

<Component Content={() => {
  return (
    <input type="text"/>
  );
}} />

2019-09-17 15:38:21

您可以将该方法调用放在呈现函数中。或者在生命周期方法中，componentDidUpdate

2015-03-06 00:14:34

<input type="text" autoFocus />

总是先尝试简单和基本的解决方案，对我来说很有效。

2020-07-19 20:18:43

你应该在componentDidMount和refs回调中做。就像这样

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>

2015-03-06 00:19:47