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

Question

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

我试过了：

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>
)

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

How to get useForm data in react component when input fields are in child component?

reactjs

react-hooks

react-hook-form