用途:面向 React 表单开发,指导在构建表单、处理提交、实现校验或使用 React 19 表单 action 时选择正确方案,避免混用受控与非受控写法等常见错误。
主要能力:区分三种表单方案——受控输入(React 18/19,value + onChange,适合实时校验、条件字段、格式化输入)、非受控输入(defaultValue + ref,适合文件输入、第三方集成、简单表单)、表单 action(React 19+,<form action={fn}>,适合异步提交、渐进增强、Server Functions)。提供输入类型速查(text、number、checkbox、radio、select、textarea、file 的受控属性、取值方式与 TypeScript 类型)、决策树与用例对照表。
React 19 能力:表单 action 自动处理提交、函数 action 恒为 POST、成功后自动重置非受控字段、配合 Server Functions 可无 JS 工作;支持多提交按钮(formAction);useFormStatus 读取父表单状态(pending、data、method、action),必须放在 <form> 内的子组件中;useActionState 管理 action 状态、错误与 pending;useOptimistic 提供即时反馈并在失败时回滚。
校验:优先使用 HTML5 原生属性(required、minLength、maxLength、min、max、step、pattern),受控输入可自定义校验并配合 aria-invalid、aria-describedby、role="alert"。
关键限制:禁止在同一元素混用 value 与 defaultValue;文件输入始终非受控,不能设置 value;useFormStatus 不能在渲染 <form> 的同一组件中调用;不要使用已废弃的 react-dom useFormState,改用 react 的 useActionState;React 18 的 onSubmit 需调用 e.preventDefault()。
参考:references/examples.md、patterns.md、anti-patterns.md,以及 react.dev 官方表单、input、select、textarea、useActionState、useOptimistic、useFormStatus 文档。