从另一个组件的表单复制表单输入 - React Hook Form
Copy form input from another Component's form - React Hook Form
我有两个具有相同表单字段的 React 组件。有一个复选框，如果被选中，它应该反映来自其他组件中表单的输入。
与“帐单地址相同”功能的概念相同，但表格位于不同的组件中。
我正在尝试使用 React Hook Form 的“watch”，但我不确定如何将输入从 Component: FormOne 传递到 Component: FormTwo。
这是我的代码：Code Sandbox
由于您多次使用 useForm，因此无法使用提供的 RHF <FormProvider />。
所以基本上你有以下选择：
- 重构您的
<Form /> 组件，它们都将使用 useForm 返回的相同方法，方法是使用 RHF 的 <FormProvider /> 而不是为每个 [=12] 定义 useForm =] 组件.
- 使用 React 的上下文 API 这样您就可以在每个子
<Form /> 组件中访问表单状态
- 使用 props 传递值和设置器
这是一个使用 RHF 的 CodeSandbox <FormProvider />:
这是一个使用 Context API:
的 CodeSandbox
我有两个具有相同表单字段的 React 组件。有一个复选框，如果被选中，它应该反映来自其他组件中表单的输入。
与“帐单地址相同”功能的概念相同，但表格位于不同的组件中。
我正在尝试使用 React Hook Form 的“watch”，但我不确定如何将输入从 Component: FormOne 传递到 Component: FormTwo。
这是我的代码：Code Sandbox
由于您多次使用 useForm，因此无法使用提供的 RHF <FormProvider />。
所以基本上你有以下选择：
- 重构您的
<Form />组件，它们都将使用useForm返回的相同方法，方法是使用 RHF 的<FormProvider />而不是为每个 [=12] 定义useForm=] 组件. - 使用 React 的上下文 API 这样您就可以在每个子
<Form />组件中访问表单状态 - 使用 props 传递值和设置器
这是一个使用 RHF 的 CodeSandbox <FormProvider />:
这是一个使用 Context API:
的 CodeSandbox