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

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

没有自动对焦的简单解决方案:

<input ref={ref => ref && ref.focus()}
    onFocus={(e)=>e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length)}
    />

ref触发focus，然后触发onFocus计算结束并相应地设置游标。

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

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

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 type="text" autoFocus />

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

我刚刚遇到了这个问题，我正在使用react 15.0.1 15.0.2，我正在使用ES6语法，并没有完全得到我需要的其他答案，因为v.15下降了几周前和一些这。Refs属性被弃用并移除。

总的来说，我需要的是:

当组件挂载时，关注第一个输入(字段)元素 关注带有错误的第一个输入(字段)元素(提交后)

我用的是:

React容器/表示组件 回来的 React-Router

聚焦第一个输入元素

我在页面上的第一个<input />上使用autoFocus={true}，这样当组件挂载时，它就会得到焦点。

关注带有错误的第一个输入元素

这需要更长的时间，也更复杂。为了简洁起见，我省略了与解决方案无关的代码。

Redux Store / State

我需要一个全局状态来知道我是否应该设置焦点，并在它被设置时禁用它，这样我就不会在组件重新呈现时重新设置焦点(我将使用componentDidUpdate()来检查设置焦点)。

这可以根据您的应用程序进行设计。

{
    form: {
        resetFocus: false,
    }
}

容器组件

组件将需要设置resetfocus属性，如果它最终将焦点设置在自己身上，则需要使用callBack来清除该属性。

还要注意的是，我将我的Action creator组织到单独的文件中，主要是因为我的项目相当大，我想把它们分成更易于管理的块。

import { connect } from 'react-redux';
import MyField from '../presentation/MyField';
import ActionCreator from '../actions/action-creators';

function mapStateToProps(state) {
    return {
        resetFocus: state.form.resetFocus
    }
}

function mapDispatchToProps(dispatch) {
    return {
        clearResetFocus() {
            dispatch(ActionCreator.clearResetFocus());
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyField);

表示组件

import React, { PropTypes } form 'react';

export default class MyField extends React.Component {
    // don't forget to .bind(this)
    constructor(props) {
        super(props);
        this._handleRef = this._handleRef.bind(this);
    }

    // This is not called on the initial render so
    // this._input will be set before this get called
    componentDidUpdate() {
        if(!this.props.resetFocus) {
            return false;
        }

        if(this.shouldfocus()) {
            this._input.focus();
            this.props.clearResetFocus();
        }
    }

    // When the component mounts, it will save a 
    // reference to itself as _input, which we'll
    // be able to call in subsequent componentDidUpdate()
    // calls if we need to set focus.
    _handleRef(c) {
        this._input = c;
    }

    // Whatever logic you need to determine if this
    // component should get focus
    shouldFocus() {
        // ...
    }

    // pass the _handleRef callback so we can access 
    // a reference of this element in other component methods
    render() {
        return (
            <input ref={this._handleRef} type="text" />
        );
    }
}

Myfield.propTypes = {
    clearResetFocus: PropTypes.func,
    resetFocus: PropTypes.bool
}

概述

一般的想法是，每个表单字段，可能有一个错误，并被集中需要检查自己，如果它需要设置自己的焦点。

需要执行业务逻辑来确定给定的字段是否是要设置焦点的正确字段。这里没有显示这一点，因为它取决于各个应用程序。

当提交表单时，该事件需要将全局焦点标志resetFocus设置为true。然后，当每个组件更新自己时，它会看到它应该检查它是否得到焦点，如果它得到了，分派事件重置焦点，这样其他元素就不必继续检查了。

编辑 作为旁注，我在一个“utilities”文件中有我的业务逻辑，我只是导出了这个方法，并在每个shouldfocus()方法中调用它。

干杯!