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

Posted

技术标签:

【中文标题】如何使用 React-Hook-Form 设置焦点【英文标题】:How to set focus a ref using 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/… 您的示例运行良好。 【参考方案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&lt;htmlInputElement | null&gt;(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

【讨论】:

以上是关于如何使用 React-Hook-Form 设置焦点的主要内容,如果未能解决你的问题,请参考以下文章

react-hook-form使用

如何使用 react-hook-form 有条件地禁用提交按钮?

react-hook-form 的 DefaultValues 未将值设置为 React JS 中的输入字段

如何使 react-hook-form 在一页中使用多个表单?

如何使用 react-hook-form 在 React 中存储无线电组的状态

使用 react-testing-library 进行测试时如何模拟 react-hook-form 的元素?