javascript - 是的，React Hook Form : How to validate onChange rather than onSubmit

Question

我有一个 onChange 函数 onNameChange，它包含一个 valid 变量，该变量应该匹配名称字段的 yup 验证。问题是 valid 变量似乎只有在提交表单后才是正确的，而不是在更改名称字段时；我希望它在必须提交之前有效。

如何在更改名称字段而不是提交时获得正确的值？请注意，我发现了一个类似的帖子，但它使用了 Formik，这不是我想要使用的:Formik + Yup: How to immediately validate form before submit?

是的设置:

const schema = Yup.object().shape({
    name: Yup.string()
      .required("Required")
      .min(3, "Enter at least 3 characters")
  });
  const {
    register,
    handleSubmit,
    setError,
    formState: { errors },
    trigger
  } = useForm({
    resolver: yupResolver(schema)
    // mode: "onTouched",
    // reValidateMode: "onChange"
  });

改名函数:

  const onNameChange = async ({ target: { value } }) => {
    const valid = await trigger("name");
    console.log("valid", valid, "value", value);
    if (!valid) {
      // @todo: bug here? valid only correct after submitting
      return;
    }
    getPokemon(value);
    setShowPokemon(false);
  };

演示形式:

<form onSubmit={handleSubmit(onSubmit /*, onError*/)}>
        <input
          {...register("name", { required: true })}
          name="name"
          placeholder="Enter a pokemon"
          onChange={onNameChange}
        />
        <button type="submit" onClick={onSubmit}>
          Show Pokemon
        </button>
        {errors.name && <p>{errors.name.message}</p>}
      </form>

我在 codesandbox 上做了一个现场演示，应该会有帮助:

https://codesandbox.io/s/react-playground-forked-odwi2?file=/Pokemon.js

谢谢

Answer 1

问题是您在更改姓名后没有更新 RHF 状态 <input /> ，因为您正在覆盖 onChange Prop ，从{...register('name')}返回.

所以基本上你必须在这里选择:

1. 使用setValue更新 name 的 RHF 状态值在你的里面onNameChange回调
2. 使用<Controller />组件

您可以在 discussion 中阅读相关信息在 GitHub 上。

这是如何使用 <Controller /> 为第二个选项实现的:

<form onSubmit={handleSubmit(onSubmit /*, onError*/)}>
  <Controller
    name="name"
    control={control}
    defaultValue=""
    render={({ field: { value, onChange, ...field } }) => (
      <input
        {...field}
        onChange={({ target: { value } }) => {
          onChange(value);
          onNameChange(value);
        }}
        placeholder="Enter a pokemon"
      />
    )}
  />

  <button type="submit" onClick={onSubmit}>
    Show Pokemon
  </button>
  {errors.name && <p>{errors.name.message}</p>}
</form>