React Hook Form中setError与shouldFocus的焦点控制问题解析

问题背景

在使用React Hook Form进行表单验证时，开发者经常会遇到需要手动设置错误信息并自动聚焦到错误字段的场景。这是一个常见的无障碍访问(a11y)需求，能够帮助用户快速定位需要修正的表单项。

核心问题现象

当表单提交过程中出现异步错误时，开发者会使用setError方法手动设置错误信息，并配合shouldFocus选项期望自动聚焦到错误字段。然而在实际开发中，当目标字段处于禁用状态(disabled)时，这个聚焦行为会失效。

技术原理分析

这个问题本质上涉及React的渲染周期和浏览器焦点控制的交互：

1. 表单提交状态：在表单提交过程中，通常会将表单字段设为禁用状态以防止重复提交，这是通过formState.isSubmitting控制的
2. 异步错误处理：当异步操作(如API调用)失败时，错误处理逻辑会在Promise回调中执行
3. 焦点控制时机：setError的shouldFocus选项会立即尝试聚焦字段，而此时React尚未完成重新渲染，字段仍处于禁用状态

解决方案

方案一：使用useEffect监听错误变化

useEffect(() => {
  if(formState.errors.password) {
    // 手动触发聚焦逻辑
  }
}, [formState.errors]);

方案二：延迟错误设置

setTimeout(() => {
  setError("password", { message: "错误信息" }, { shouldFocus: true });
}, 0);

方案三：解除字段禁用状态

如果业务允许，可以在设置错误前确保字段处于可用状态：

setError("password", { message: "错误信息" }, { shouldFocus: true });
// 或者先完成提交状态
setIsSubmitting(false);

最佳实践建议

1. 考虑用户体验：在表单提交失败后，应该立即解除禁用状态，让用户可以修改字段
2. 错误处理策略：对于关键表单，建议在服务端验证失败后保持表单数据，仅标记错误字段
3. 无障碍访问：确保错误信息不仅通过视觉呈现，还要通过ARIA属性等方式提供给屏幕阅读器

总结

React Hook Form的setError与shouldFocus组合使用时，需要注意React的渲染周期与浏览器焦点控制的交互问题。理解这一机制有助于开发者构建更健壮、用户体验更好的表单交互。在实际项目中，建议结合具体业务场景选择最适合的解决方案。