React：设置焦点在componentDidMount上，如何用钩子做？

Question

在React中，对于类，我可以在组件加载时将焦点设置为输入，如下所示：

class Foo extends React.Component {
    txt1 = null;

    componentDidMount() {
        this.txt1.focus();
    }

    render() {
        return (
            <input type="text"
                ref={e => this.txt1 = e}/>
        );
    }
}

我正在尝试使用新的hooks proposal重写此组件。

我想我应该使用useEffect而不是componentDidMount，但我怎样才能重写焦点逻辑？

Answer 1

你可以使用useRef钩子来创建一个ref，然后将它聚焦在一个useEffect钩子中，并将一个空数组作为第二个参数，以确保它只在初始渲染之后运行。

const { useRef, useEffect } = React;

function Foo() {
  const txt1 = useRef(null);

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

  return <input type="text" ref={txt1} />;
}

ReactDOM.render(<Foo />, document.getElementById("root"));

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

<div id="root"></div>