使用反应钩子形式进行条件验证

Question

这是我的表格，也是CodeSanbox。目前我正在使用 react-hook-form
如您所见，表单有 3 个输入。在输入所有必填字段之前，应禁用提交按钮。 两个用例：

1. 如果未选中“检查”：
   • 只有“id”应该被验证并且提交按钮应该被启用。 “first”和“last”名称不应成为表单数据的一部分
2. 如果选中“检查”
   • 应验证所有字段
     只有在选中“检查”时才需要名字和姓氏。所以它没有被检查然后表单应该只验证“ID”字段。如果选中“检查”，则应验证所有字段。

我遇到的问题是，如果我输入 id，表单状态仍然是“无效”。表单需要输入名字和姓氏的值。
我将不胜感激。

Answer 1

我已更新您的 CodeSanBox 代码，并在此处添加完整代码：

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

import "./index.css";

function App() {
  const {
    register,
    handleSubmit,
    errors,
    formState,
    unregister,
    setValue,
    getValues,
    reset
  } = useForm({
    mode: "onBlur",
    reValidateMode: "onBlur",
    shouldUnregister: true
  });
  //console.log(formState.isValid);
  console.log(errors);
  const [disabled, setDisabled] = useState(true);
  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };
  useEffect(() => {
    // @ts-ignore

    if (disabled) {
      console.log("unregister");
      reset({ ...getValues(), firstName: undefined, lastName: undefined });
      unregister(["firstName", "lastName"]);
    } else {
      console.log("register");
      register("firstName", { required: true });
      register("lastName", { required: true });
    }
  }, [disabled]);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="id">ID</label>
      <input
        name="id"
        placeholder="id"
        ref={register({ required: true, maxLength: 50 })}
      />
      {errors.id && <p>"ID is required"</p>}
      <fieldset disabled={disabled}>
        <legend>
          <input
            type="checkbox"
            name={"name"}
            ref={register}
            onClick={() => setDisabled(!disabled)}
          />
          <span>Check</span>
        </legend>
        <label htmlFor="firstName">First Name</label>
        <input
          name="firstName"
          placeholder="Bill"
          onChange={(e) => {
            console.log(e.target.value);
            setValue("firstName", e.target.value);
          }}
          ref={register({ required: !disabled })}
        />
        {errors.firstName && <p>"First name is required"</p>}
        <label htmlFor="lastName">Last Name</label>
        <input
          name="lastName"
          placeholder="Luo"
          onChange={(e) => setValue("lastName", e.target.value)}
          ref={register({ required: !disabled })}
        />
        {errors.lastName && <p>"Last name is required"</p>}
      </fieldset>

      <input type="submit" disabled={!formState.isValid} />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

首先我发现您将disabled 状态设置为false，这应该是true 作为初始值，关于这个问题，我在disabled 状态时使用了reset 和getValues 函数变化。

EDIT让你更容易识别代码更改，我已经在 CodeSanBox 恢复了所有代码。

Answer 2

整个验证行为 (UX) 肯定会让事情变得更加困难，但是，您应该从库中利用一些东西，例如：

• watch
• validate
• getValues

import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

import "./index.css";

function App() {
  const {
    register,
    handleSubmit,
    errors,
    formState: { isValid, touched },
    getValues,
    trigger,
    watch
  } = useForm({
    mode: "onBlur"
  });
  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };
  const validate = (value) => {
    if (getValues("name")) { // read the checkbox value
      return !!value;
    }

    return true;
  };
  const isChecked = watch("name"); // watch if the name is checked

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="id">ID</label>
      <input
        name="id"
        placeholder="id"
        ref={register({ required: true, maxLength: 50 })}
      />
      {errors.id && <p>"ID is required"</p>}

      <fieldset disabled={!isChecked}>
        <legend>
          <input
            type="checkbox"
            name={"name"}
            ref={register}
            onChange={() => trigger()} // you want update isValid due to state change, and also those extra two inputs become required
          />
          <span>Check</span>
        </legend>
        <label htmlFor="firstName">First Name</label>
        <input
          name="firstName"
          placeholder="Bill"
          ref={register({
            validate
          })}
        />
        // make sure input is touched before fire an error message to the user
        {errors.firstName && touched["firstName"] && (
          <p>"First name is required"</p>
        )}
        <label htmlFor="lastName">Last Name</label>
        <input
          name="lastName"
          placeholder="Luo"
          ref={register({
            validate
          })}
        />
        {errors.lastName && touched["lastName"] && (
          <p>"Last name is required"</p>
        )}
      </fieldset>

      <input type="submit" disabled={!isValid} />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CSB： https://codesandbox.io/s/react-hook-form-conditional-fields-forked-n0jig?file=/src/index.js:0-1831

Answer 3

您只需要替换 true .from ref: required:true..... 而是使用 const 'disabled' ....in 输入名字和姓氏。

从而实现动态变化

Answer 4

在你的 ref 上，不要使用硬编码的 bool true、ref={register({ required: true})}，而是你的动态 ref={register({ required: disabled })}

请注意，由于您的 mode: "onBlur" 配置，在 id 字段模糊之前，该按钮将无法使用