在 React Hook Form 中设置默认值

Question

我想检查 RHF 是否用户已使用参数修改了表单值isDirty。

手动设置默认值是可行的：

const {handleSubmit, control, setValue, setError, setFocus} = useForm({defaultValues: {name: ""}});

这似乎工作正常。

但是，当用户尝试编辑表单时，我将值加载到表单中setValue。

现在我不知道如何以编程方式设置默认值。

如何使用 useEffect() 更改 React-Hook-Form defaultValue？

我就是这样做的，但答案并不正确。值已设置，但 defaultValues 不会以这种方式更改，因此 RHF 无法进行比较。

确保在 useForm 中提供所有输入的默认值，以便钩子表单可以有单一的事实来源来比较表单是否脏。

https://react-hook-form.com/api/useform/formstate

如何动态设置 defaultValues 以便它甚至可以在“编辑”模式下工作？

Answer 1

您可以更轻松地设置reset()表单defaultValue的 。这是我为您准备的CodeSandbox示例。

您所要做的就是在内部创建一个对象useEffect()。使用该对象设置所有默认值。终于将那defaultValues东西摊了进去reset()。

  useEffect(() => {
    let defaultValues = {};
    defaultValues.firstName = "Kristof";
    defaultValues.lastName = "Rado";
    reset({ ...defaultValues });
  }, []);

  <input {...register("firstName")} placeholder="First Name" />
  <input {...register("lastName")} placeholder="Last Name" />