在 React Hook 表单中设置默认值

如果用户使用 isDirty 参数修改了表单值,我想检查 RHF。

手动设置 defaultValues 有效:

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

这似乎工作正常。

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

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

How to change React-Hook-Form defaultValue with useEffect()?

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

确保在 useForm 中提供所有输入的 defaultValues,以便 hook 表单可以有一个单一的事实来源来比较表单是否脏。

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

如何动态设置 defaultValues 使其甚至可以在“编辑”模式下工作?

stack overflow Set default values in React Hook Form
原文答案
author avatar

接受的答案

使用 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" />

答案: