React Hook Form中resetField与reset共用时失效的解决方法咨询

问题原因 #

在useEffect里调用reset({test: "test"})时，React Hook Form会将该字段的**默认值(defaultValue)**设置为"test"。而resetField的默认行为是把字段重置为它的默认值，所以点击按钮后输入框看起来没变化——实际已经完成重置，只是目标值就是你通过reset设置的"test"。

解决方案 #

1. 调用resetField时指定重置目标值 #

如果希望点击按钮后清空字段（或重置为其他自定义值），可以在resetField中传入defaultValue参数指定目标值：

const { reset, resetField, register } = useForm();

useEffect(() => {
  reset({test: "test"});
}, [reset])

<input {...register("test")} />
<button onClick={() => {
  // 这里设置为空字符串，可根据需求改为其他值
  resetField("test", { defaultValue: "" })
}}>button</button>

2. 初始化时通过useForm的defaultValues配置默认值 #

放弃用reset设置初始值，改为在调用useForm时直接传入defaultValues，这种方式更符合React Hook Form的设计规范，resetField会正常重置到预设的初始值：

const { resetField, register } = useForm({
  defaultValues: { test: "test" }
});

<input {...register("test")} />
<button onClick={() => {resetField("test")}}>button</button>

3. 动态修改值时保留原有默认值 #

如果需要在后续逻辑中动态更新字段值，但希望resetField仍能重置到最初的默认值，可以在调用reset时传入第二个参数keepDefaultValues: true：

reset({test: "new dynamic value"}, { keepDefaultValues: true })

内容的提问来源于stack exchange，提问作者choisuhyeok