时间戳

首页 > 解决方案 > 使用 Reacthookforms 和 Yup 动态禁用字段

reactjs - 使用 Reacthookforms 和 Yup 动态禁用字段

问题描述

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

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

我尝试使用 isValid() 但它返回一个承诺，因此一旦字段变得无效就无法重新检查。

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

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

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

任何建议将不胜感激

标签： reactjsvalidationyupdisable

解决方案

所以我会在这里使用反应钩子形式的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

推荐阅读