在 React Hook 表单中设置默认值

IT技术 reactjs react-hook-form
2022-08-01 00:06:59

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

手动设置 defaultValues 有效：

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

这似乎工作正常。

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

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

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

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

确保在 useForm 中提供所有输入的 defaultValues，这样钩子表单可以有一个单一的事实来源来比较表单是否脏。

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

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

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" />
其它你可能感兴趣的问题
上一篇在获取数据时显示 CSS 加载指示器 下一篇react-native嵌套堆栈导航显示空屏幕