React结合react-hook-form时text field的defaultValue无法覆盖已有输入值

原因分析 #

• React 中非受控组件的defaultValue属性仅在组件首次挂载时生效，后续该属性值变化不会触发输入框内容更新
• 你使用react-hook-form的register绑定的输入框默认是非受控模式，因此修改defaultValue无法覆盖用户已经输入过的内容

解决方案（适配react-hook-form） #

推荐使用react-hook-form提供的setValue方法主动更新表单值，这是官方推荐的手动修改表单项的实现方式：

1. 首先从useForm hook的返回值中解构出setValue方法：

const { register, handleSubmit, setValue } = useForm();

2. 修改编辑按钮的点击逻辑，在切换编辑状态、获取到对应学生数据后，主动调用setValue给输入框赋值：

const handleEdit = (targetIdx) => {
  // 原有逻辑：更新编辑状态、记录当前选中的索引
  setState(prev => ({ ...prev, isEdit: true, idx: targetIdx }));
  // 新增逻辑：手动更新表单对应字段值，会直接覆盖输入框现有内容
  setValue('name', data[targetIdx].name);
  // 如果有第二个输入框，按照同样格式添加赋值逻辑即可，例如：
  // setValue('age', data[targetIdx].age);
}

3. 输入框原有的defaultValue逻辑可以保留也可以删除，setValue的优先级更高，会直接覆盖输入框的当前值。

补充说明 #

如果需要在退出编辑状态时清空表单，可以调用setValue('name', '')清空单个字段，或者调用useForm返回的reset()方法直接重置整个表单的所有字段值。

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