React 19 · Form Action 实验

表单状态与无障碍反馈实验台

让一次提交真实经历 idle、pending、成功、字段错误和未知故障；同时观察最近父表单作用域、焦点移动、ARIA 关系与乐观回滚。

一次提交如何穿过状态机

选择服务器结果再提交。实验会保留或清空字段、移动焦点，并把两个 Hook 的可见范围并排展示。

idle → pending →（success / 字段错误 / 未知错误）

idle 等待用户动作
pending 文字反馈与防误点
success 服务器确认后清空
字段错误 返回状态并保留输入
未知错误 交给错误边界
本次服务器结果
0到达服务器的请求
0数据库实际写入

任务草稿表单

useActionState 接收 previousState 与 FormData，并返回可序列化状态。

idle

提交后会模拟服务器结果；字段错误将返回输入值并把焦点移到错误摘要。

2–80 个字符；服务器仍会重新验证。

失败时保留原文，成功时由服务器状态决定是否清空。

高优先级可能触发领域权限错误。

本实验只展示一项，服务器仍应核对资源归属。

防误点不等于防重复写入。
disabled 只能减少连续点击，刷新、双标签页、网络重试和直接 POST 仍会到达服务器。

意图键：intent-A7 重复请求：0 服务器回执：尚未写入

乐观评论：先显示，再校准或回滚

临时评论只在 Action 期间存在。服务器成功后用真实记录替换；失败时撤销临时项并保留输入。

任务评论

待确认项同时显示“发送中”，不只依赖颜色。

2 条服务器记录

    挑战 1 / 12

    正在载入题目……

    请选择一个答案
    选择一个答案后检查。