如何使用React Hook Form为输入框设置默认值？

你当前的写法存在问题：直接给输入框添加value属性会和React Hook Form的状态管理机制冲突，register方法已经会接管输入框的状态控制，手动设置value会导致表单状态异常，默认值无法正常显示。

以下是两种正确的实现方式：

方法一：初始化时配置默认值 #

在调用useForm时通过defaultValues参数全局设置表单默认值：

const { register, handleSubmit, watch } = useForm({
  defaultValues: {
    title: "I want a default value"
  }
});

对应的输入框无需手动添加value属性：

<input {...register("title")} type="text" />

方法二：动态设置默认值 #

如果需要在组件挂载后或某个事件触发时设置默认值，可以使用reset方法：

import { useEffect } from 'react';
const { register, handleSubmit, watch, reset } = useForm();

useEffect(() => {
  // 组件挂载时重置表单并设置默认值
  reset({
    title: "I want a default value"
  });
}, [reset]);

输入框写法同样无需手动指定value：

<input {...register("title")} type="text" />

注意事项 #

React Hook Form 依赖自身的状态管理来同步表单控件的值，手动给register绑定的输入框设置value会破坏这种同步逻辑，不仅默认值不生效，还可能导致输入内容无法正常更新。

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