Controlled Components 受控组件

最后更新：2026-10-28

受控组件指表单元素的值由 React state 驱动：value 绑定 state，onChange 里更新 state，形成「数据单向流 + 事件回写」的闭环。它是 React 表单的默认范式，让输入值随时可校验、可提交、可联动。

分组	组件模式
类型	模式

ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。

📝 语法

<input
  value={name}                           // state 驱动显示
  onChange={e => setName(e.target.value)} // 输入时回写 state
/>

返回值：无返回值，作为编码模式使用。

示例可直接运行：展开后自动渲染，编辑代码即时生效。

输出结果：

输入「小明」、选择「进阶」后，下方实时显示「你好，小明（进阶）」——每敲一个字符 state 更新一次，UI 同步重渲染。

💡 提示 value 和 onChange 必须成对出现：只绑 value 不写 onChange，输入框会被 React 锁死无法输入。

ℹ️ 说明 受控后输入值每敲一键都进 state，校验、禁用按钮、联动下拉都变成纯函数式的状态推导。

⚠️ 注意 value 一旦开始受控就不要变成 undefined，否则在受控/非受控之间摇摆会报错。

更多案例整理中，敬请期待。

Q 受控组件和非受控组件怎么选？

A 需要即时校验、联动、条件禁用或提交前处理时用受控；只关心提交时刻的值可用非受控（ref 读值）。React 表单默认推荐受控。

Q 只写 value 不写 onChange 会怎样？

A 输入框变成「只读」：React 把 value 锁定为 state 值，用户按键不生效，控制台会给出警告。

Q 每个 input 都要写一套 useState 吗？

A 字段多时可合并为一个对象 state（按字段名更新），或抽成自定义 Hook / useReducer 统一管理。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。