javascript - react 采取错误验证的多步骤形式

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;

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

Answer 1

React Hook Form 包含原生表单验证，这意味着当您的组件从 DOM 中移除时，输入状态将被移除。我们将其设计为与标准保持一致，但是我们开始意识到越来越多习惯于控制表单的用户对这个概念感到困惑，因此我们引入了一个新的配置来保留未安装的输入状态。这仍在 RC 中，尚未发布。
useForm({ shouldUnregister: true })
目前解决方案:

拆分多条路由，将数据存入全局存储

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

将您的步骤转化为多种形式并将数据存储在本地状态

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