反应中的多步骤形式采取错误的验证

Question

我在这里把我的问题写成一个新的部分。

我制作了一个多步骤表单，其中我以第一种形式动态归档，该字段是手动创建密码或只是自动生成。

所以我的多步骤表单来回工作正常，但我必须将字段传递给主组件，以便它可以检查验证，并且我也传递了该密码

问题来了

当我通过password字段时，即使我单击自动生成的密码，它也需要进行验证

我正在传递这样的字段fields: ["uname", "email", "password"], //to support multiple fields form

所以即使不检查让我创建密码也需要验证。

当我单击"让我创建密码"并输入一些值，然后单击"下一步"时，当我返回时，输入字段再次设置为隐藏到其初始状态，我知道为什么会发生这种情况，因为当我返回时，它会再次恢复初始状态。

我现在受够了这个东西，我已经尝试了很多东西但没有工作 下面是我的代码

import React, { useState, useEffect } from "react";
import Form1 from "./components/Form1";
import Form2 from "./components/Form2";
import Form3 from "./components/Form3";
import { useForm } from "react-hook-form";
function MainComponent() {
const { register, triggerValidation, errors, getValues } = useForm();
const [defaultValues, setDefaultValues] = useState({});

const forms = [
{
fields: ["uname", "email", "password"], //to support multiple fields form
component: (register, errors, defaultValues) => (
<Form1
register={register}
errors={errors}
defaultValues={defaultValues}
/>
)
},
{
fields: ["lname"],
component: (register, errors, defaultValues) => (
<Form2
register={register}
errors={errors}
defaultValues={defaultValues}
/>
)
},
{
fields: [""],
component: (register, errors, defaultValues) => (
<Form3
register={register}
errors={errors}
defaultValues={defaultValues}
/>
)
}
];

const [currentForm, setCurrentForm] = useState(0);

const moveToPrevious = () => {
setDefaultValues(prev => ({ ...prev, ...getValues() }));

triggerValidation(forms[currentForm].fields).then(valid => {
if (valid) setCurrentForm(currentForm - 1);
});
};

const moveToNext = () => {
setDefaultValues(prev => ({ ...prev, ...getValues() }));
triggerValidation(forms[currentForm].fields).then(valid => {
if (valid) setCurrentForm(currentForm + 1);
});
};

const prevButton = currentForm !== 0;
const nextButton = currentForm !== forms.length - 1;
const handleSubmit = e => {
console.log("whole form data - ", JSON.stringify(defaultValues));
};
return (
<div>
<div class="progress">
<div>{currentForm}</div>
</div>

{forms[currentForm].component(
register,
errors,
defaultValues[currentForm]
)}

{prevButton && (
<button
className="btn btn-primary"
type="button"
onClick={moveToPrevious}
>
back
</button>
)}
{nextButton && (
<button className="btn btn-primary" type="button" onClick={moveToNext}>
next
</button>
)}

{currentForm === 2 && (
<button
onClick={handleSubmit}
className="btn btn-primary"
type="submit"
>
Submit
</button>
)}
</div>
);
}

export default MainComponent;

请检查我的代码沙盒 在这里你可以找到完整的工作代码代码沙箱

Answer 1

React Hook Form 采用原生表单验证，这意味着当你的组件从 DOM 中删除并且输入状态将被删除时。我们将其设计为与标准保持一致，但是我们开始意识到越来越多的习惯于控制表单的用户对这个概念感到困惑，因此我们引入了一个新的配置来保留未挂载的输入状态。这仍然在 RC 中，没有发布。

useForm({ shouldUnregister: true })

目前的解决方案：

1. 中断到多个路由并将数据存储在全局存储中

https://www.youtube.com/watch?v=CeAkxVwsyMU

2. 将您的步骤转换为多个表单并将数据存储在本地状态中

https://codesandbox.io/s/tabs-760h9

Answer 2

使用 keepAlive 并使它们保持活力： https://github.com/CJY0208/react-activation