你可以在这里查看更新的版本

componentDidMount() {

    // Focus to the input as html5 autofocus
    this.inputRef.focus();

}
render() {
    return <input type="text" ref={(input) => { this.inputRef = input }} />
})

@Dhiraj的答案是正确的，为了方便，你可以使用自动对焦道具在安装时自动对焦:

<input autoFocus name=...

注意，在jsx中，它是自动聚焦(大写F)，不像普通的旧html是不区分大小写的。

这不再是最好的答案。从v0.13开始，这个。在某些奇怪的情况下，refs可能在AFTER componentDidMount()运行之前不可用。

只需将autoFocus标签添加到输入字段，如上面的FakeRainBrigand所示。

你不需要getInputDOMNode??在这种情况下……

当组件被挂载时，只需简单地获取ref和focus()它——componentDidMount…

import React from 'react';
import { render } from 'react-dom';

class myApp extends React.Component {

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

  render() {
    return(
      <div>
        <input ref={input => { this.nameInput = input; }} />
      </div>
    );
  }

}

ReactDOM.render(<myApp />, document.getElementById('root'));

ReactDOMComponent:不要访问DOM节点的.getDOMNode();相反，直接使用节点。这个DOM节点由App渲染。

应该是

componentDidMount: function () {
  this.refs.nameInput.focus();
}

重点关注功能组件使用createRef

给使用功能组件的开发人员。这似乎很合适。点击按钮后，焦点发生在inputfield上。我也附上了CodeSandbox链接。

import React from 'react';

export default function App() {
  const inputRef = React.createRef();
  return <>
    <input ref={inputRef} type={'text'} />
    <button onClick={() => {if (inputRef.current) { inputRef.current.focus() }}} >
      Click Here
    </button>
  </>
}

https://codesandbox.io/s/blazing-http-hfwp9t