React-Hook-Form：输入空白时如何不显示错误

Question

一旦触摸了某个组件，然后用户清除了输入，默认行为是继续显示错误。如何才能使触摸后清除输入时错误消失？

下面的代码是文档的摘录

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

export default function App() {
  const { register, formState: { errors }, handleSubmit } = useForm();
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true })} />
      {errors.firstName?.type === 'required' && "First name is required"}
      
      <input {...register("lastName", { required: true })} />
      {errors.lastName && "Last name is required"}
      
      <input type="submit" />
    </form>
  );
}

Answer 1

您的验证规则会检查这些字段是否为必填字段，因此，如果您希望字段为空时不出现错误，则意味着您此时不想显示验证结果。

您可以选择何时执行验证并通过给出的 2 个选项显示错误useForm()：

• mode：这定义了第一次执行验证的时间。默认情况下，它在单击提交按钮时执行，而不是在此之前。
• reValidateMode：这定义了第一次之后何时执行验证。默认情况下，它在更改时执行。这意味着在第一次验证后，每次输入字符时，错误都会根据每个字段的有效状态出现或消失。

因此，您可以决定始终通过提供选项来验证提交{reValidateMode: "onSubmit"}，并使用 重置更改时的错误clearErrors。

function App() {
  const {
    register,
    formState: { errors },
    handleSubmit,
    clearErrors
  } = useForm({ reValidateMode: "onSubmit" });
  const onSubmit = () => null;
  const firstName = register("firstName", { required: true });
  const lastName = register("lastName", { required: true });
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...firstName}
        onChange={(e) => {
          firstName.onChange(e);
          clearErrors("firstName");
        }}
      />
      {errors.firstName?.type === "required" && "First name is required"}

      <input
        {...lastName}
        onChange={(e) => {
          lastName.onChange(e);
          clearErrors("lastName");
        }}
      />
      {errors.lastName && "Last name is required"}

      <input type="submit" />
    </form>
  );
}

这是一个代码和盒子。

您还可以仅在字段为空时（而不是在每个字符更改时）通过在调用之前检查字段的值来重置错误clearErrors，但我认为用户仅在以下情况下看到错误消失并不是很直观字段实际上格式不正确。