用途:该技能用于系统审计 React 表单/输入组件中受控(controlled)与非受控(uncontrolled)混用的情况,并将其规范化为单一清晰模式。
主要能力:扫描代码中所有渲染表单元素的组件(原生 input、textarea、select,以及 TextField、Input、Select、Checkbox、Switch、RadioGroup 等常见库组件),记录传入的 value、defaultValue、checked、defaultChecked、onChange、状态连接与 ref 使用情况,然后按规则分类为受控、非受控或混用/损坏。
可识别的典型问题:设置了 value 却无 onChange;value 初始为 undefined 后变为真实值;同一元素同时有 value 和 defaultValue;onChange 更新状态但未绑定 value;value 来自可能为 undefined 的 prop。
使用方式:先收集全部输入组件并分类,再为整个表单选择规范化模式(默认推荐受控),然后应用规范化。受控化时把初始值移入 useState 初始化器、每个 value 配 onChange、用 value={name ?? ''} 防 undefined、select 的 value 放在 select 标签上、复选框用 checked 加 onChange。非受控化时移除 value 绑定与仅用于存值的状态、改用 defaultValue、用 ref 读取。
特殊场景:React Hook Form 非受控模式用 register(),受控模式用 Controller;Formik 始终受控;动态字段数组始终用受控并避免用数组索引作 key。
限制与注意:第三方 UI 库(MUI、Ant Design、Radix、Headless UI)有各自的受控/非受控语义,需查阅其文档;条件渲染、props 展开可能意外混入 value 与 defaultValue。资料未提供具体安装命令、收费或平台信息。