引用:@Dave对@Dhiraj的回答的评论;另一种方法是在被呈现的元素上使用ref属性的回调功能(在组件第一次呈现之后):

<input ref={ function(component){ React.findDOMNode(component).focus();} } />

更多信息

我刚刚遇到了这个问题，我正在使用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()方法中调用它。

干杯!

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

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

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

这是元素的ref属性:

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

根据更新后的语法，你可以使用this.myRref.current.focus()

要将焦点移动到新创建的元素上，您可以将元素的ID存储在状态中，并使用它来设置自动聚焦。如。

export default class DefaultRolesPage extends React.Component {

    addRole = ev => {
        ev.preventDefault();
        const roleKey = this.roleKey++;
        this::updateState({
            focus: {$set: roleKey},
            formData: {
                roles: {
                    $push: [{
                        id: null,
                        name: '',
                        permissions: new Set(),
                        key: roleKey,
                    }]
                }
            }
        })
    }

    render() {
        const {formData} = this.state;

        return (
            <GridForm onSubmit={this.submit}>
                {formData.roles.map((role, idx) => (
                    <GridSection key={role.key}>
                        <GridRow>
                            <GridCol>
                                <label>Role</label>
                                <TextBox value={role.name} onChange={this.roleName(idx)} autoFocus={role.key === this.state.focus}/>
                            </GridCol>
                        </GridRow>
                    </GridSection>
                ))}
            </GridForm>
        )
    }
}

通过这种方式，没有任何文本框获得页面加载的焦点(就像我想要的那样)，但是当你按下“添加”按钮来创建一个新记录时，那么这个新记录就会获得焦点。

由于autoFocus不会再次“运行”，除非组件重新挂载，所以我不必费心取消this.state.focus(即当我更新其他状态时，它不会一直窃取焦点)。