如何使用 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<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
【讨论】:
以上是关于如何使用 React-Hook-Form 设置焦点的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 react-hook-form 有条件地禁用提交按钮?
react-hook-form 的 DefaultValues 未将值设置为 React JS 中的输入字段
如何使 react-hook-form 在一页中使用多个表单?