React 19 的 useFormStatus 老是返回 false？我写了个修好它的提交按钮
来源：dev.to — 2026-09-29
📋 概述
作者之前写过 useFormStatus 最阴的一个 bug：这个 hook 只报告「父级 form」的状态，如果它和 form 由同一个组件渲染，pending 就会永远停在 false，而且既没有报错也没有控制台提示，按钮只是安静地从不进入挂起状态。这篇讲他真正做出来的修复组件，以及在写完第一版修复后又踩到的同类静默失败。他先指出范围：这只修复「调用位置」的错误——如果表单通过只调 preventDefault() 的 onSubmit，或者字符串 action 提交，那根本没有 Action 可跟踪。
🔑 核心要点
- 第一处改进是把 disabled={pending} 换成 aria-disabled：原生 disabled 会让按钮立刻失焦，键盘用户按下回车后焦点会跳走。
- 改用 aria-disabled 后要手动拦截重复点击，并且样式要基于 aria-disabled 或 data-pending，而不是 :disabled。
- 表单里有两个提交按钮时，pending 属于整个表单而不属于被点的那个按钮，用按钮自身的 name/value 作为 intent 才能区分「存草稿」和「发布」。
- 整份实现只有一个文件、除 react/react-dom 外零依赖，含按钮、fieldset、live region 与放置位置检查；作者也列出了已知限制（formAction、requestSubmit、同任务内两次点击、未测 Safari 与屏幕阅读器）。
💡 金句
没有报错，没有控制台消息，按钮只是安静地从不进入挂起状态。
👍 0
👎 0
← 返回 dev.to 首页