React Hook Form 中表单提交时自动标记字段为已交互的实现探讨

在表单处理库 React Hook Form 的实际应用中，开发者经常面临一个常见需求：如何在表单提交时自动将所有字段标记为"已交互"(touched)状态。本文将深入探讨这一需求的背景、现有解决方案以及最佳实践。

需求背景

在表单验证场景中，我们通常希望：

1. 初始状态下不显示任何错误信息
2. 当用户与某个字段交互(如聚焦后离开)后，才显示该字段的验证错误
3. 表单提交时，显示所有未通过验证字段的错误信息

React Hook Form 默认提供了 isTouched 状态来跟踪用户是否与字段交互，但没有直接提供在提交时自动标记所有字段为已交互的功能。

现有解决方案分析

方案一：结合 isTouched 和 isSubmitted

React Hook Form 的 formState 提供了 isSubmitted 状态，可以配合使用：

{error && (isTouched || isSubmitted) && (
  // 显示错误信息
)}

这种方案虽然可行，但需要在每个字段的渲染逻辑中重复判断，增加了模板代码。

方案二：自定义验证模式

通过配置 mode 和 reValidateMode 可以实现类似效果：

useForm({
  mode: "onTouched",  // 初始验证触发时机
  reValidateMode: "onChange" // 提交后的验证触发时机
});

这种配置的工作流程：

1. 用户首次与字段交互时会触发验证
2. 提交表单后，任何字段变化都会触发重新验证
3. 未通过验证的字段会立即显示错误

深入理解交互状态设计

React Hook Form 的设计理念中，touched 状态是用户实际交互的反映，而不是开发者可以随意修改的状态。这种设计有几点优势：

1. 行为一致性：真实反映用户与表单的交互过程
2. 可预测性：开发者可以准确知道哪些字段被用户操作过
3. 无障碍支持：与屏幕阅读器等辅助技术的预期行为一致

最佳实践建议

对于需要在提交时显示所有错误的场景，推荐以下实现方式：

1. 使用 formState.isSubmitted：

   • 最简单直接的解决方案
   • 保持代码清晰可读
   • 与库的设计理念一致

2. 自定义封装组件： 可以创建高阶组件封装重复逻辑：

   function ValidationError({ error, isTouched, isSubmitted }) {
     if (!error) return null;
     if (isTouched || isSubmitted) {
       return <div className="error">{error.message}</div>;
     }
     return null;
   }
   

3. 考虑用户体验：

   • 首次提交后显示所有错误
   • 用户修正错误时即时反馈
   • 避免过早显示错误造成干扰

总结

虽然直接设置 setIsTouchedOnSubmit 的API看起来很方便，但 React Hook Form 现有的验证模式配置已经能够优雅地解决这个问题。理解库的设计哲学并合理使用 mode 和 reValidateMode 配置，可以构建出既符合用户预期又易于维护的表单验证逻辑。

对于大多数应用场景，结合 isSubmitted 状态和适当的验证模式配置是最佳选择，既保持了代码的简洁性，又符合表单交互的最佳实践。