向用户显示验证反馈

Question

我做了一个简单的反应形式与反应钩子形式和是作为验证器。如果用户的输入被成功验证，我想向用户展示一些反馈，比如绿色的大纲。问题是，当输入被验证时，我只想显示绿色的大纲，而不是每次呈现组件时。我该怎么做？构成部分：

const schema = yup.object().shape({
  email: yup
    .string()
    .required("This field is required"),
  password: yup.string().required("This field is required"),
});

export const Form = () => {
  const {
    register,
    handleSubmit,
    getValues,
    formState: { errors },
  } = useForm({
    mode: "onBlur",
    resolver: yupResolver(schema),
  });

  return (
      <form noValidate onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        {...register("email")}
      />
     {errors.email ? errors?.email.message : null}
       <label htmlFor="password">Password</label>
      <input
        id="password"
        type="password"
        {...register("password")}
      />
      {errors.password ? errors?.password.message : null}
      <button
        type="submit"
      >
        Submit
      </button>
    </form>  
  );
};

Answer 1

您可以使用触摸属性实现所需的内容。在这种场景中使用触摸属性是非常常见的。以下是你能做的：

从useForm钩子中，还可以提取touchedFields

const {
    register,
    handleSubmit,
    getValues,
    formState: { errors, touchedFields }
  } = useForm({
    mode: "onBlur",
    resolver: yupResolver(schema)
  });

touchedFields属性存储被触摸的字段。当用户第一次离开该字段的焦点时，该字段就会被触摸。因此，您可以有条件地显示一条关于字段的消息，如果该字段被触摸，并且没有如下错误：

{touchedFields.email && !errors.email ? <div>Email ok</div> : null}

你可以试试这个沙箱。我希望你能从中得到这个想法。