React Hook Form 中禁用字段值提交问题的分析与解决

在表单开发过程中，我们经常会遇到需要禁用某些字段但又不想让这些字段的值被提交的情况。React Hook Form 作为一款流行的表单库，在处理禁用字段提交时存在一个值得注意的行为差异。

问题现象

当使用 React Hook Form 的 resolver 功能进行表单验证时，开发者发现被标记为 disabled 的字段值仍然会被包含在提交数据中。这与不使用 resolver 时的行为不一致，后者会正确地过滤掉禁用字段的值。

技术背景

React Hook Form 的表单提交处理流程分为几个关键步骤：

1. 收集表单当前值
2. 处理禁用字段过滤
3. 执行验证逻辑
4. 触发提交回调

在常规情况下，表单会先收集所有字段值，然后移除被禁用字段的值，最后进行提交。但当使用 resolver 时，验证过程会直接使用原始表单值，跳过了禁用字段过滤这一步骤。

问题根源

通过分析源代码，发现问题出在 createFormControl.ts 文件的 handleSubmit 函数中。该函数首先创建 fieldValues（已过滤禁用字段），但在存在 resolver 的情况下，验证过程直接使用了 _formValues（未过滤的原始值），导致禁用字段重新出现在最终提交数据中。

解决方案

修复方案相对直接：无论是否存在 resolver，都应该使用经过处理的 fieldValues 进行验证。具体修改包括：

1. 确保验证阶段接收的是过滤后的字段值
2. 保持验证逻辑与最终提交数据的一致性
3. 不破坏现有的 resolver 接口约定

实现影响

这一修复确保了 React Hook Form 在处理禁用字段时的行为一致性，无论是否使用 resolver，都能正确过滤掉禁用字段的值。对于开发者而言，这意味着：

• 更可预测的表单提交行为
• 减少因意外提交禁用字段值导致的后端问题
• 保持与无障碍设计原则的一致性（禁用字段通常不应参与表单提交）

最佳实践

基于这一问题的解决，开发者在使用 React Hook Form 时应注意：

1. 明确区分只读字段和禁用字段的语义差异
2. 对于需要显示但不提交的字段，考虑使用 readOnly 而非 disabled
3. 在复杂验证场景中，始终测试禁用字段的提交行为
4. 保持 React Hook Form 版本的更新以获取最新修复

这一问题的解决体现了 React Hook Form 社区对细节的关注和对一致性的追求，使得表单处理逻辑更加健壮可靠。