javascript - React : set focus on componentDidMount, 如何用钩子(Hook)做？

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钩子(Hook)来创建一个 ref，然后将它集中在一个 useEffect 钩子(Hook)中，用一个空数组作为第二个参数，以确保它只在初始渲染之后运行。

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/react@16.7.0-alpha.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.production.min.js"></script>

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