英文:
Prevent form data accumulation when using React Hook Form on a multi-step dynamically generated form
问题
我有一个多步骤（多页面）的表单，其内容是动态生成的。换句话说，根据先前步骤上的问题的答案，可以提出不同的问题。
我正在尝试使用React Hook Forms来实现它，因此，我的表单结构如下所示：
const MultiPageDynamicForm = () => {
const formMethods = useForm()
const { handleSubmit } = formMethods
const formContent = useSelector(state => state.formContent)
const dispatch = useDispatch()
const onSubmit = (data, event) => {
event.preventDefault()
// 提交数据并获取下一步的内容，然后存储在Redux状态中。
dispatch(submitForm(data))
// 我的问题是，即使表单不再显示先前步骤的输入，数据参数仍然会累积先前步骤的值。
}
return (
<FormProvider {...formMethods}>
<form onSubmit={handleSubmit(onSubmit)}>
<GenericInput type={formContent.inputType} /> // 根据inputType参数渲染不同的输入类型的组件
<button type="submit">下一步</button>
</form>
</FormProvider>
)
}
如上面的代码片段中所述，我的问题是，当调用onSubmit时，data参数会累积所有先前输入提交的键值对，而不仅仅显示该特定步骤提交的输入值。
因此，如果我有一个三步骤的表单，在第1步中要求名字，在第2步中要求电子邮件，在第3步中要求出生日期，data参数将累积先前的值，如下所示：
{ name: 'Bob' } // 第1步
{ name: 'Bob', email: 'bob@example.com' } // 第2步
{ name: 'Bob', email: 'bob@example.com', dob: '01/02/2003' } // 第3步
而我只希望它包含该特定步骤提交的值。
第1步：{ name: 'Bob' } // 第1步
第2步：{ email: 'bob@example.com' } // 第2步
第3步：{ dob: '01/02/2003' } // 第3步
是否有办法在多步骤动态表单上每次清除数据状态？我已经在Redux中存储了每个后续步骤的响应，所以我不需要React Hook Form再为我做这个。
英文:
I have a multi-step (multi-page) form whose content is dynamically generated. In other words, depending on the answer to a question on a previous step, a different question can be asked.
I am trying to use React Hook Forms for it and so, my form is structured something like this:
const MultiPageDynamicForm = () => {
const formMethods = useForm()
const { handleSubmit } = formMethods
const formContent = useSelector(state => state.formContent)
const dispatch = useDispatch()
const onSubmit = (data, event) => {
e.preventDefault()
// Submits the data for one step and gets the content for the next step
// and stores in Redux state.
dispatch(submitForm(data))
// My problem is that the data parameter keeps accumulating
// values for previous steps even when the form no longer shows those inputs.
}
return (
<FormProvider {...formMethods}>
<form onSubmit={handleSubmit(onSubmit)}>
<GenericInput type={formContent.inputType} /> // This component renders a different input type depending on the inputType parameter
<button type="submit">Next</button>
</form>
</FormProvider>
)
}
As noted in the code snippet above, my problem is that the data parameter given when calling onSubmit keeps accumulating the key,value pairs for all the previous inputs submitted rather than just showing the input value submitted for that particular step.
So if I have a three step form and I ask for first name on step 1, email on step 2 and birthdate on step 3, the data parameter will accumulate previous values like:
{ name: 'Bob' } // Step 1
{ name: 'Bob', email: 'bob@example.com' } // Step 2
{ name: 'Bob', email: 'bob@example.com', dob: '01/02/2003' } // Step 3
Instead, I only want it to contain the values submitted for that particular step.
Step 1: { name: 'Bob' } // Step 1
Step 2: { email: 'bob@example.com' } // Step 2
Step 3: { dob: '01/02/2003' } // Step 3
Is there a way to clear out the data state on a multi-step dynamic form each time? I'm storing each subsequent step's responses in Redux already so I don't need React Hook Form to do it for me.
答案1
得分: 0
The reset function is what I needed.
Therefore, I needed something like:
const { handleSubmit, reset } = useForm()
useEffect(() => {
reset() // 在向导表单的每个页面/步骤之间清除React Hook Form状态。
...
}, [reset])
英文:
The reset function is what I needed.
Therefore, I needed something like:
const { handleSubmit, reset } = useForm()
useEffect(() => {
reset() // Clear out React Hook Form state between each page/step of the wizard form.
...
}, [reset])
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论