React Hook Form 中如何选择性重置表单字段

在表单开发过程中，我们经常会遇到需要重置部分表单字段而保留其他字段的需求。React Hook Form 作为流行的表单管理库，提供了灵活的表单重置功能。

表单重置的基本用法

React Hook Form 的 reset 方法默认会重置整个表单，将所有字段值恢复为初始状态。这是最常见的使用方式：

const { reset } = useForm();
// 重置整个表单
reset();

选择性重置字段的需求

在实际开发中，我们可能需要更精细的控制。例如：

1. 当用户切换表单类型时，需要重置部分相关字段
2. 保留用户的基本信息（如姓名），只重置其他字段
3. 在表单提交成功后，只清除输入内容而保留验证状态

React Hook Form 的高级重置方案

React Hook Form 提供了回调函数的方式来实现选择性重置：

reset(currentValues => {
  return {
    ...currentValues,  // 保留现有值
    test: 'whatever',  // 修改特定字段
    // 可以添加更多需要修改的字段
  };
});

这种方式的优势在于：

1. 可以访问当前表单的所有值
2. 可以精确控制哪些字段需要保留，哪些需要修改
3. 保持了函数式编程的不可变性原则

实际应用场景示例

假设我们有一个用户信息表单，包含姓名、邮箱和地址等字段。当用户切换国家时，我们只想重置地址字段而保留其他信息：

const handleCountryChange = (selectedCountry) => {
  reset(values => ({
    ...values,
    address: '',
    postalCode: '',
    city: ''
  }));
};

注意事项

1. 使用回调函数方式重置时，确保不要意外修改了需要保留的字段
2. 对于复杂的表单结构，考虑将需要保留的字段提取为常量
3. 重置操作不会自动触发表单验证，需要手动处理验证逻辑

React Hook Form 的这种设计提供了极大的灵活性，使开发者能够根据具体业务需求精确控制表单状态，而不必受限于全有或全无的重置方式。