React Hook Form 中禁用表单状态下的字段验证问题解析

问题背景

在使用 React Hook Form 7.53.0 版本时，开发者遇到了一个表单验证相关的问题：当整个表单被禁用时，即使单独注册的字段已经填写了有效内容，表单验证仍然无法正常工作。这个问题在 7.52.2 版本中并不存在，表明这是新版本引入的一个行为变更。

问题现象

具体表现为：

1. 当表单通过 useForm 的 disabled 属性被禁用时
2. 即使单独的表单字段已经填写了有效内容
3. 提交表单时验证逻辑不会执行
4. 表单的提交处理函数也不会被触发

技术分析

React Hook Form 提供了两种方式来禁用表单元素：

1. 表单级禁用：通过 useForm 的 disabled 属性禁用整个表单
2. 字段级禁用：通过 useController 或直接注册时的 disabled 属性禁用单个字段

在 7.53.0 版本中，当使用表单级禁用时，系统会忽略所有字段的验证逻辑，即使这些字段已经正确填写。这是因为表单级禁用被视为一种"全局覆盖"行为，会跳过所有表单操作，包括验证和提交。

解决方案

根据项目维护者的建议，正确的做法是：

1. 从 useFormState 中获取表单的禁用状态
2. 将禁用状态显式传递给 useController
3. 这样既能保持表单的禁用状态，又能确保字段验证正常工作

这种做法的优势在于：

• 保持了表单的禁用状态
• 允许单个字段的验证逻辑正常执行
• 提供了更细粒度的控制能力

最佳实践

对于需要处理禁用表单场景的开发者，建议：

1. 优先考虑使用字段级禁用而非表单级禁用
2. 如果需要全局禁用，确保将禁用状态传递给各个控制器
3. 在复杂场景中，可以组合使用表单状态和字段状态

版本兼容性说明

这个问题在 7.52.2 版本中不存在，因为旧版本对禁用状态的处理更为宽松。升级到 7.53.0 后，验证逻辑变得更加严格，需要开发者更明确地处理禁用状态。

总结

React Hook Form 在 7.53.0 版本中对表单禁用状态的处理进行了调整，要求开发者更精确地控制禁用状态的传递。通过理解框架的设计理念和正确使用 API，可以避免这类验证问题，构建出更健壮的表单逻辑。