本卡普的解决方案在打字稿

React 16.8 +功能组件- useFocus钩子

export const useFocus = (): [React.MutableRefObject<HTMLInputElement>, VoidFunction] => {
  const htmlElRef = React.useRef<HTMLInputElement>(null);
  const setFocus = React.useCallback(() => {
    if (htmlElRef.current) htmlElRef.current.focus();
  }, [htmlElRef]);

  return React.useMemo(() => [htmlElRef, setFocus], [htmlElRef, setFocus]);
};

这是正确的方法，如何自动对焦。当你使用callback而不是string作为ref value时，它会被自动调用。你得到了你的ref，而不需要使用getDOMNode触摸DOM

render: function() {
  return <TextInput ref={(c) => this._input = c} />;
},
componentDidMount: function() {
  this._input.focus();
},

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

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

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

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

干杯!

使用React Hooks / Functional组件和Typescript，你可以使用useRef钩子和HTMLInputElement作为useRef的泛型参数:

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

export default function MyComponent(): JSX.Element {
    const inputReference = useRef<HTMLInputElement>(null);

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

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

或者如果使用reactstrap，将inputReference提供给innerRef而不是ref:

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

export default function MyComponent(): JSX.Element {
    const inputReference = useRef<HTMLInputElement>(null);

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

    return (
        <div>
            <Input innerRef={inputReference} />
        </div>
    );
}

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

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