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

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

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

关注坐骑

如果你只是想在一个元素挂载(初始渲染)时聚焦它，简单使用autoFocus属性就可以了。

<input type="text" autoFocus />

动态焦点

要动态控制焦点，请使用通用函数对组件隐藏实现细节。

React 16.8 +功能组件- useFocus钩子

const FocusDemo = () => {

    const [inputRef, setInputFocus] = useFocus()

    return (
        <> 
            <button onClick={setInputFocus} >
               Focus
            </button>
            <input ref={inputRef} />
        </>
    )
    
}

const useFocus = () => {
    const htmlElRef = useRef(null)
    const setFocus = () => {htmlElRef.current &&  htmlElRef.current.focus()}

    return [ htmlElRef, setFocus ] 
}

完整的演示

React 16.3 +类组件-使用

class App extends Component {
  constructor(props){
    super(props)
    this.inputFocus = utilizeFocus()
  }

  render(){
    return (
      <> 
          <button onClick={this.inputFocus.setFocus}>
             Focus
          </button>
          <input ref={this.inputFocus.ref}/>
      </>
    )
  } 
}

const utilizeFocus = () => {
    const ref = React.createRef()
    const setFocus = () => {ref.current &&  ref.current.focus()}

    return {setFocus, ref} 
}

完整的演示

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

应该是

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

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

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"/>
  );
}} />

React 16.3增加了一个新的方便的方法来处理这个问题，在组件的构造函数中创建一个ref，并像下面这样使用它:

class MyForm extends Component {
  constructor(props) {
      super(props);

      this.textInput = React.createRef();
  }

  componentDidMount() {
    this.textInput.current.focus();
  }

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

有关React的更多细节。createRef，你可以在React博客中查看这篇文章。

更新:

从React 16.8开始，可以在函数组件中使用useRef钩子来实现相同的结果:

import React, { useEffect, useRef } from 'react';

const MyForm = () => {
  const textInput = useRef(null);

  useEffect(() => {
    textInput.current.focus();
  }, []);

  return (
    <div>
      <input ref={textInput} />
    </div>
  );
};

这一点对我很有用:

<input autoFocus={true} />