当文本输入中的数据设置如下时如何停止显示错误：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"),
  });

Answer 1

您可以定义一个 onfocus 或 onkeyup 事件并在那里调用验证函数而不是 onChange 事件。

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

Answer 2

您可以通过 onBlur 事件调用您的验证器，而不是在输入更改时触发验证器。而且我不确定你是如何使用 react-hook-form ..但是 useForm 钩子有一个配置 mode (onChange | onBlur | onSubmit | onTouched | all = 'onSubmit') 关于何时触发验证：

Answer 3

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

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

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

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

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

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

How to stop displaying error when data inside text input was set like this: value={value} React Hook Form

javascript

reactjs

react-hook-form