在 React Hook 表单中设置默认值

Kristof Rado
2022-01-11  
1571  
    
1  

如果用户使用 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 使其甚至可以在“编辑”模式下工作？

reactjs ,  react-hook-form
stack overflow Set default values in React Hook Form
原文答案
author avatar
Jeet Viramgama
2022-01-11
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" />

答案:

相关问题

标签