使用样式的组件中的反应对react中的文本输入进行自动对焦

Question

如何在页面加载上使用样式的组件进行React中的TextInput？

我确实使用了usefect，但看来它没有在文本输入上自动对焦。我希望将电子邮件文本输入重点放在页面加载上。

codesandbox-＆gt;

function App() {
  const emailInput = useRef(null);

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

  return (
    <div>
      <Input type="text" placeholder="Name" />
      <Input type="email" placeholder="Email" innerRef={emailInput} />
    </div>
  );
}

Answer 1

按照样式components文档，在 InnerRef节，InnerRef被弃用为V4：

注意

在样式组件V4中除去了“ InterRef”支柱，而有利于React 16 ForwardRef API。只需使用普通的裁判道具即可。

在React 16之前，没有一个很好的方法将参考文献传递给父母（使用回调除外）。在react 16.3 forward> forward> forward> forward> forward> 与 useref honk稍后。样式的组件V4已开始使用该机制。

因此，您可以直接使用Ref：

function App() {
  const emailInput = useRef(null);

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

  return (
    <div>
      <Input type="text" placeholder="Name" />
      <Input type="email" placeholder="Email" ref={emailInput} />
    </div>
  );
}

在另一侧，如果目的仅用于聚焦，则如@andy所述，autofocus属性可能是一个更好的选择：

function App() {
  return (
    <div>
      <Input type="text" placeholder="Name" />
      <Input type="email" placeholder="Email" autoFocus />
    </div>
  );
}

React的autocus属性正在与上面的代码完全相同（focus在安装上以编程方式元素）。请勿将其与HTML的自动对焦属性混淆，该行为在浏览器之间不一致。