如何使用 React-Hook-Form 设置焦点答案

【问题标题】：How to set focus a ref using React-Hook-Form如何使用 React-Hook-Form 设置焦点
【发布时间】：2020-12-26 23:58:29
【问题描述】：

如何使用 React-Hook-Form 在输入中实现设置焦点，这是他们的常见问题解答“如何共享参考使用”代码https://www.react-hook-form.com/faqs/#Howtosharerefusage

import React, { useRef } from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();
  const firstNameRef = useRef();
  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstName" ref={(e) => {
        register(e)
        firstNameRef.current = e // you can still assign to ref
      }} />
      <input name="lastName" ref={(e) => {
        // register's first argument is ref, and second is validation rules
        register(e, { required: true })
      }} />

      <button>Submit</button>
    </form>
  );
}

我尝试在 useEffect 中设置焦点，但它不起作用：

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

在输入内部也没有：

<input name="firstName" ref={(e) => {
    register(e)
    firstNameRef.current = e;
    e.focus();
}} />

【问题讨论】：

你能在代码盒中重现这个吗？
@Bill 在这里：codesandbox.io/s/modern-water-57w99?file=/src/components/…
您的示例运行良好。

标签： reactjs react-hook-form

【解决方案1】：

您可以使用 useForm 钩子返回的 setFocus 帮助器设置焦点（无需使用自定义 ref）：

 const allMethods = useForm();
 const { setFocus } = allMethods;

 ...

 setFocus('inputName');

https://react-hook-form.com/api/useform/setFocus

【讨论】：

【解决方案2】：

你在使用 Typescript 吗？

如果是，替换...

const firstNameRef = useRef();

随着...

const firstNameRef = useRef<HTMLInputElement | null>(null);

【讨论】：

【解决方案3】：

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

<input name="firstName" ref={firstNameRef} />

从:https://github.com/react-hook-form/react-hook-form/issues/230得到这个

【讨论】：

【解决方案4】：

如果您使用版本 7，您可以在文档中查看此链接

https://www.react-hook-form.com/faqs/#Howtosharerefusage

【讨论】：