React Hook Form 中 trigger 方法的 shouldTouch 选项需求分析

背景介绍

在表单开发中，React Hook Form 是一个非常流行的库，它提供了简洁高效的 API 来处理表单状态和验证。在实际开发中，我们经常会遇到字段间存在联动关系的场景，比如多个复选框之间"至少选择一个"的验证需求。

问题描述

当我们在 React Hook Form 中实现"至少选择一个"的复选框组时，通常会遇到以下挑战：

1. 当用户取消选中第一个复选框时，需要触发第二个复选框的验证
2. 表单配置为仅在字段被触摸或表单提交时才显示错误信息
3. 当前 trigger 方法无法同时标记字段为已触摸状态

这会导致用户体验问题：即使验证失败，由于字段未被标记为 touched，错误信息不会显示给用户。

技术分析

React Hook Form 提供了几种处理字段联动的方法：

1. trigger 方法：专门用于触发字段验证，但不改变字段的 touched 状态
2. setValues 方法：可以更新字段值并通过 shouldTouch 选项控制 touched 状态

目前开发者不得不使用 setValues 方法来模拟 trigger + shouldTouch 的组合功能，但这并非最佳实践，因为：

• setValues 主要用于更新值而非专门用于验证
• 需要额外调用 getValues 来获取当前值
• 代码意图不够明确

解决方案建议

理想的解决方案是为 trigger 方法添加 shouldTouch 选项，使其能够：

1. 触发指定字段的验证
2. 可选地标记字段为已触摸状态
3. 保持现有 API 的简洁性

这样开发者可以明确地表达意图：

trigger('checkbox2', { shouldTouch: true });

实现考量

从技术实现角度，这个功能需要考虑：

1. 向后兼容性：新选项不应影响现有代码
2. 性能影响：额外的 touched 状态更新需要高效处理
3. API 一致性：与 setValues 等方法的选项命名保持一致

最佳实践

在当前版本中，开发者可以采用以下临时解决方案：

// 当前推荐的变通方案
setValue('checkbox2', getValues('checkbox2'), { 
  shouldTouch: true,
  shouldValidate: true 
});

但这种方法相比专门的 trigger 方法略显冗长，且语义不够明确。

总结

为 React Hook Form 的 trigger 方法添加 shouldTouch 选项将显著改善字段联动验证场景下的开发者体验。这一改进将使表单验证逻辑更加直观，同时保持库的简洁性和一致性。对于需要字段间复杂验证关系的表单，这一功能将提供更优雅的解决方案。