React Hook Form 中禁用状态下单选按钮默认值失效问题解析

问题现象

在使用 React Hook Form 7.51.3 版本时，开发者发现当为单选按钮(radio button)设置 disabled: false 选项时，即使指定了 defaultValues，单选按钮的默认选中状态也无法正确显示。而当移除 disabled 选项后，默认值又能正常工作。

技术背景

React Hook Form 是一个流行的 React 表单库，它通过 useForm hook 提供表单状态管理。其中 register 方法用于注册表单控件，可以接受配置选项来定义控件的行为。

单选按钮组在表单中通常用于互斥选择场景，开发者期望通过 defaultValues 来设置初始选中项。然而，当与 disabled 选项结合使用时，出现了预期之外的行为。

问题根源

经过分析，问题的根本原因在于 React Hook Form 的内部实现逻辑。在创建表单控制逻辑时，当检测到 disabled 选项存在（即使设置为 false），表单库会跳过默认值的设置流程。这是一个实现上的边界条件处理不足的问题。

解决方案

对于需要动态控制表单元素可用状态的场景，开发者可以考虑以下替代方案：

1. 使用 readOnly 替代 disabled
   虽然语义上有所不同，但在大多数表单交互场景下，readOnly 可以达到类似的限制用户输入的效果，同时不会影响默认值的设置。

2. 条件性注册表单元素
   对于需要完全禁用的情况，可以考虑不在初始渲染时注册该表单元素，而是在需要时动态注册。

3. 等待官方修复
   该问题已被项目维护者确认并修复，开发者可以升级到修复后的版本。

最佳实践建议

在处理表单元素状态时，特别是单选按钮组，建议开发者：

• 尽量避免在初始注册时使用 disabled 选项，除非确实需要禁用该控件
• 对于动态禁用场景，考虑使用表单的 watch 方法监听相关字段变化，然后动态设置禁用状态
• 在需要保持表单值但限制用户交互时，优先考虑 readOnly 而非 disabled

总结

React Hook Form 的这一边界条件问题提醒我们，在使用表单库时，即使是看似简单的布尔值选项，也可能因为内部实现逻辑而产生预期之外的行为。开发者需要充分理解所用工具的内部机制，并在遇到问题时考虑替代方案或等待官方修复。