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钩子来创建引用，然后将其聚焦在带有空白数组作为第二个参数的useEffect钩子中，以确保它仅在初始渲染之后运行。 / p>

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>

Answer 2

根据官方文档：https://reactjs.org/docs/hooks-reference.html#useref 您可以使用useRef。

useRef返回一个可变的ref对象，该对象的.current属性被初始化为传递的参数（initialValue）。返回的对象将在组件的整个生命周期内保持不变。

一个常见的用例是强制性地访问一个孩子：

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

本质上，useRef就像一个“盒子”，可以在其.current属性中保留可变的值。

您可能最熟悉refs作为访问DOM的一种方式。如果您通过<div ref={myRef} />将ref对象传递给React，则只要该节点发生更改，React就会将其.current属性设置为相应的DOM节点。

但是，useRef()的作用远远超过ref属性。与在类中使用实例字段的方式类似，保留任何可变值都很方便。

之所以可行，是因为useRef()创建了一个纯JavaScript对象。 useRef()与自己创建{current: ...}对象之间的唯一区别是useRef将在每个渲染器上为您提供相同的ref对象。

请记住，当useRef的内容更改时，它不会通知您。更改.current属性不会导致重新渲染。如果您想在React将ref附加或分离到DOM节点时运行一些代码，则可能要改用回调ref。

React：将重点放在componentDidMount上，如何用钩子做到这一点？

2 个答案: