如何解决如何使用React-Hook-Form
您如何使用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>
);
}
我尝试将ref集中设置在useEffect内,但是它不起作用:
useEffect(()=>{
firstNameRef.current.focus();
},[])
输入内容中也不包含
<input name="firstName" ref={(e) => {
register(e)
firstNameRef.current = e;
e.focus();
}} />
解决方法
你在使用 Typescript 吗?
如果是,请更换...
const firstNameRef = useRef();
随着...
const firstNameRef = useRef<HTMLInputElement | null>(null);
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
得到这个 ,如果您使用的是第 7 版,您可以在文档中查看此链接
https://www.react-hook-form.com/faqs/#Howtosharerefusage
,您可以使用 useForm 钩子返回的 setFocus
助手设置焦点(无需使用自定义引用):
const allMethods = useForm();
const { setFocus } = allMethods;
...
setFocus('inputName');
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。