“受控组件 (Controlled Component)” 是 React 中表单处理的一个核心概念。
定义
受控组件：指那些表单输入值由 React 组件的 state 控制的组件。
也就是说：
-
表单控件的 显示值（value） 来自组件的 state；
-
当用户输入时，通过 onChange 事件 更新 state；
-
组件的 state → 控件的值，形成了单向数据流。
通俗理解
你可以理解成：
React “接管”了输入框的值。
输入框的内容不再由浏览器自己管理，而是由 React 的 state 管理。
示例对比
受控组件
function Form() {const [name, setName] = React.useState('');const handleChange = (e) => setName(e.target.value);const handleSubmit = (e) => {e.preventDefault();alert('提交的名字是：' + name);};return (<form onSubmit={handleSubmit}><input value={name} onChange={handleChange} /><button type="submit">提交</button></form>);
}
-
输入框的值 value={name} 由 React 的 state 控制；
-
用户输入时触发 onChange 更新 state；
-
React 永远知道输入框里是什么。
非受控组件（Uncontrolled Component）
function Form() {const inputRef = React.useRef();const handleSubmit = (e) => {e.preventDefault();alert('提交的名字是：' + inputRef.current.value);};return (<form onSubmit={handleSubmit}><input ref={inputRef} /><button type="submit">提交</button></form>);
}
-
表单的值由 DOM 自己维护；
-
React 只是“读取”这个值；
-
React 不知道实时的输入变化。
对比总结
| 对比项 | 受控组件 | 非受控组件 |
|---|---|---|
| 数据来源 | React state | DOM 自身 |
| 取值方式 | 通过 state | 通过 ref |
| 监听变化 | onChange 更新 state | 不一定监听 |
| 适用场景 | 数据同步、校验、动态表单 | 简单场景、第三方库 |
| 优点 | 数据可控、便于校验 | 更接近原生 |
| 缺点 | 代码略多，需写 onChange | React 不知道值的变化 |
一句话总结
受控组件 = 表单输入受 React state 控制的组件。
React 的 state 是“唯一数据源”。