在 React Hook Form 中设置默认值

Question

如果用户使用 isDirty 参数修改了表单值，我想签入 RHF。

手动设置默认值有效：

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

这似乎工作正常。

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

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

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

Make sure to provide all inputs' defaultValues at the useForm, so hook form can have a single source of truth to compare whether the form is dirty.

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

如何动态设置默认值，使其甚至可以在 'edit' 模式下工作？

Answer 1

使用 reset() 设置表单的 defaultValue 会更容易。这是我为您准备的 CodeSandbox 示例。

您所要做的就是在 useEffect() 中创建一个对象。使用该对象设置所有默认值。最后在 reset().

中传播那个 defaultValues 对象

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

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

在 React Hook Form 中设置默认值

Set default values in React Hook Form

reactjs

react-hook-form