最简单的答案是在输入文本元素中添加ref="some name"并调用下面的函数。

componentDidMount(){
   this.refs.field_name.focus();
}
// here field_name is ref name.

<input type="text" ref="field_name" />

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

应该是

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

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

重点关注功能组件使用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

这一点对我很有用:

<input autoFocus={true} />

我也有同样的问题，但我也有一些动画，所以我的同事建议使用window.requestAnimationFrame

这是元素的ref属性:

ref={(input) => {input && window.requestAnimationFrame(()=>{input.focus()})}}