使用 Reacthookforms 和 Yup 动态禁用字段

Question

我已经做了大约 3 周的大三学生，遇到了我自己无法解决的第一个问题，我的大四学生离开了 2 周。

一旦字段 a 有效，我似乎无法获得反应挂钩表单来禁用和启用字段 b。

我试过使用 isValid() 但 returns 一个承诺，一旦字段变得无效就无法重新检查。

我已经尝试查看是否存在错误，并根据是否存在错误来禁用和启用，这在一定程度上有效，但如果该字段为空则不会禁用该字段，这在我的情况下是无效的。

<input disabled={errors.name ? true : false} />

https://codesandbox.io/embed/beautiful-mclean-ewmdu?fontsize=14&hidenavigation=1&theme=dark

如有任何建议，我们将不胜感激

Answer 1

所以我会在这里使用 React 钩子形式的 watch() 函数。我正在观察全名的输入值，将其存储在一个变量中，并用它来检查我是否应该禁用输入。下面是一个不完整的代码示例：

 const {
    register,
    handleSubmit,
    watch, // Don't forget to pull watch from useForm
    formState: { errors }
  } = useForm({
   mode: "onChange",
    resolver: yupResolver(validationSchema)
  });
  // fullName variable value will change anytime there's update to input field
  const fullName = watch('fullname');

  const onSubmit = (data) => console.log(data);
  ...etc
  return (
    ...etc
     <input
      disabled={!fullName || fullName.length === 0 || erros.fullName}
      className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
      name="coolname"
      {...register("coolname")}
    />
  ...etc

使用 Reacthookforms 和 Yup 动态禁用字段

Using Reacthookforms and Yup to disable fields dynamically

validation

reactjs

yup

disable