当输入字段在子组件时，如何在反应组件中获得useForm数据?

Question

如何在父组件中使用useForm从子组件获取数据?我所有的组件都是react-hook。

我试着:

SignUp.js:

const { register, handleSubmit } = useForm();
const submitHandler = (data) => {
console.log(data);
};
return (
<div style={{ margin: "3rem" }}>
<form onSubmit={handleSubmit(submitHandler)}>
<Form register={register}>
<button type="submit">Sign Up</button>
</form>
</div>

Form.js:

return(
<div>
<input name="username" ref={props.register}/>
</div>
)

但是当我点击提交按钮时，我在控制台上得到一个空对象{}。这是正确的方法吗，还是我应该添加一些其他的?

Answer 1

我从https://react-hook-form.com/faqs了解setValue

SignUp.js:

const { register, handleSubmit, setValue, setError } = useForm();
useEffect(() => {
register({ name: "username" });
register({ name: "first_name" });
register({ name: "last_name" });
}
const submitHandler = (data) => {
console.log(data);
};
return (
<div style={{ margin: "3rem" }}>
<form onSubmit={handleSubmit(submitHandler)}>
<Form setValue={setValue}>
<button type="submit">Sign Up</button>
</form>
</div>
)

Form.js:

return(
<div>
<input 
name="username" 
onChange={(e) => props.setValue("username", e.target.value)}/>
<input 
name="first_name" 
onChange={(e) => props.setValue("first_name", e.target.value)}/>
<input 
name="last_name" 
onChange={(e) => props.setValue("last_name", e.target.value)}/>
</div>
)