javascript - 当文本输入中的数据设置如下时如何停止显示错误：value={value} React Hook Form

Question

React Hook Forms 检测到我在输入内容时更改了文本输入的值（onChange）。但是如果我将数据输入到输入中，它也能检测到变化value={value}吗？

const validator = register(name);

我需要类似的东西

onValueSet={(e) => {
            validator.onChange(e);
          }}

我的意思是，如果我只是设置数据，value={value}我会收到一个错误，即需要此输入。我不想要这个错误，因为数据是由value={value}.

这是我的输入：

<StyledInput
          name={name}
          maxLength={100}
          value={value}
          onChange={(e) => {
            validator.onChange(e);
          }}
        />

和我的验证模式：

const validationSchema = Yup.object().shape({
    first_name: Yup.string()
      .required("required"),
  });

标签： javascriptreactjsreact-hook-form

Answer 1

您必须在reset此处使用并在收到初始表单数据时调用它。我假设您正在执行 api 调用并希望将结果设置为表单。您可以使用 来执行此操作useEffect，观察数据何时解析，然后使用实际值重置表单。这样您就不必通过valueprop 设置值并让 RHF 管理输入的状态。你也不需要设置nameprop，因为 RHF 的register调用也会返回这个 prop。

const Component = (props) => {
  const { result } = useApiCall();
  const { register, reset } = useForm();

  useEffect(() => {
    reset(result)
  }, [result]);

  return (
   ...
    <StyledInput
      {...register('first_name')}
      maxLength={100}
    />
    ...
  )
}

这是一个小 CodeSandbox 演示您的用例：