React Hook Form无法正确重置部分表单字段问题咨询

为啥只有select能重置，其他字段不行？核心问题是你用的search输入框和日期选择器没跟React Hook Form的状态做好双向绑定——调用reset的时候，表单内部状态改了，但组件显示的数值没同步上。select能正常工作是因为它的绑定逻辑是对的。

下面是具体修复步骤：

1. 给search输入框套个Controller #

React Hook Form的register更适合原生非受控组件，像自定义的search输入这种受控组件，用Controller来管理状态才靠谱：

import { Controller, useForm } from "react-hook-form";

// 组件内的初始化代码
const { control, reset, defaultValues } = useForm({
  defaultValues: {
    search: "",
    startDate: new Date(),
    endDate: new Date(),
    category: ""
  }
});

// 替换原来的search输入框
<Controller
  name="search"
  control={control}
  render={({ field }) => (
    <input
      type="search"
      {...field}
      placeholder="搜索..."
    />
  )}
/>

2. 修正日期选择器的绑定逻辑 #

日期选择器一般是第三方受控组件（比如react-datepicker），同样得用Controller绑定，这样状态才能同步更新：

// 假设你使用的是react-datepicker组件
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

// 开始日期选择器
<Controller
  name="startDate"
  control={control}
  render={({ field }) => (
    <DatePicker
      selected={field.value}
      onChange={field.onChange}
      placeholderText="选择开始日期"
    />
  )}
/>

// 结束日期选择器
<Controller
  name="endDate"
  control={control}
  render={({ field }) => (
    <DatePicker
      selected={field.value}
      onChange={field.onChange}
      placeholderText="选择结束日期"
    />
  )}
/>

3. select组件保持现有逻辑即可 #

你的select已经正确使用了register，不需要修改：

<select {...register("category")}>
  <option value="">选择分类</option>
  <option value="1">分类1</option>
  <option value="2">分类2</option>
</select>

4. 重置按钮逻辑不变 #

重置按钮依然直接调用reset(defaultValues)，现在所有字段的内部状态和显示值都会同步重置：

<button onClick={() => reset(defaultValues)}>重置表单</button>

关键逻辑说明 #

React Hook Form的reset方法只会更新表单内部状态，如果组件是受控模式但没和表单状态绑定，显示值就不会同步变化。Controller组件的作用就是在表单内部状态和受控组件之间建立双向绑定，既保证状态变更时组件显示同步，也能正确收集表单值。

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