javascript - 如何使用 react 以多步形式进行验证

Question

我正在处理一个场景，我必须做一个我已经完成的多步骤表单，以及验证部分。我正在使用 react-hook-form用于验证。
我有多步形式:

在第一个表单中，我有几个字段和一个单选按钮

默认情况下，为 auto generated pass 勾选了单选按钮所以在这种情况下我无事可做

第二个是 let me create a password所以在这种情况下，将显示一个输入字段，用户将创建密码

问题
在我的最终表格中，我正在做如下验证:

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

因此，为了验证 uname、电子邮件和密码，我传递了上述值。
但是当为自动生成的密码勾选单选按钮时，它仍在处理验证，我点击下一步，由于密码字段，它不会下一步。
如果我将单选按钮检查为 let me create the password它转到下一个表单，当我点击 back 回来时它要去 auto generated password再次，它没有保持以前的状态。对于其他输入字段，它正在处理以前的值，但不是在单选按钮方案的情况下。
My full working code sandbox

Answer 1

答案 1 原因是你fields: ["uname", "email", "password"]已修复，password总是要采取验证。
解决方案 需要存储 Form1 的状态在应用程序中，您可以检查 auto generated password 的状态正在从列表中删除密码
应用程序.js

... other code
// need to move state and function form Form to app
const [show_input, setshow_input] = useState(false);

  const createInput = () => {
    setshow_input(true);
  };
  const auto_text = () => {
    setshow_input(false);
  };
  const forms = [
    {
      // validate based on show_input state
      fields: show_input ? ["uname", "email", "password"] : ["uname", "email"], //to support multiple fields form
      component: (register, errors, defaultValues) => (
        <Form1
          register={register}
          errors={errors}
          defaultValues={defaultValues}
          auto_text={auto_text}
          createInput={createInput}
          show_input={show_input}
        />
      )
    },
    {
      fields: ["lname"],
      component: (register, errors, defaultValues) => (
        <Form2
          register={register}
          errors={errors}
          defaultValues={defaultValues}
        />
      )
    },
    {
      component: (register, errors, defaultValues) => (
        <Form3
          register={register}
          errors={errors}
          defaultValues={defaultValues}
        />
      )
    }
  ];
... other code

答案 2 下次去的时候 Form1被卸载所以它的状态被破坏。当您在 App.js 中存储 Form1 的状态时，您也将解决此问题
奖励:最好使用camalCase(例如:showInput)而不是下划线(show_input)