React 受控组件

受控组件是 React 管理表单数据的核心模式——表单元素的值完全由组件 state 控制，用户的每次输入都通过 onChange 同步回 state，再由 state 驱动 UI 更新。读完本文你将掌握：受控组件的实现原理、各类表单元素（文本框、复选框、选择框）的受控写法，以及性能优化和常见注意事项。

一、实现受控组件的三个关键点

1. 将表单元素的值与 state 绑定

把表单元素的 value（或 checked）属性绑定到组件的 state，React 就会接管这个表单元素的显示逻辑。

function Demo(params: type) {
  const [value, setValue] = useState('')
  return <input value={value} onChange={(e) => setValue(e.target.value)} />
}

2. 必须提供 onChange 事件处理函数

当用户在表单元素中输入时，浏览器触发 onChange。你需要在回调里调用 setState 更新 state，React 随后用新的 state 值重新渲染表单元素。如果省略 onChange，React 会在控制台打印警告，输入框将变为只读。

3. 表单元素的值始终等于 state 中的值

React 保证了单向数据流：state → value → 显示。这意味着你始终知道表单的值——它就是 state——不需要通过 DOM 去读取。

二、不同类型表单元素的实现

不同表单元素的受控属性略有差异：

表单元素	受控属性	事件回调参数
`<input>` 文本	`value`	`e.target.value`
`<input type="checkbox">`	`checked`	`e.target.checked`
`<select>`	`value`	`e.target.value`

文本输入框

将 value 绑定到 state，在 onChange 中通过 e.target.value 更新。

function Demo(params: type) {
  const [value, setValue] = useState('')
  return <input value={value} onChange={(e) => setValue(e.target.value)} />
}

复选框

复选框通过 checked（而非 value）控制选中状态，通过 e.target.checked 获取布尔值。

function Demo(params: type) {
  const [value, setValue] = useState(false)
  return <input type="checkbox" checked={value} onChange={(e) => setValue(e.target.checked)} />
}

选择框

<select> 的 value 绑定到 <option> 的 value 属性。选中哪个 <option>，state 就是对应的值。

function Demo(params: type) {
  const [value, setValue] = useState('1')
  return (
    <select value={value} onChange={(e) => setValue(e.target.value)}>
      <option value="1">选项一</option>
      <option value="2">选项二</option>
    </select>
  )
}

三、应用场景

受控组件让你可以在每次输入时介入处理逻辑，以下是几个典型场景：

场景	说明
即时字段验证	在用户输入时立即校验内容有效性，实时显示错误提示
条件禁用提交按钮	根据表单字段的验证状态，动态控制提交按钮的 `disabled` 属性
强制输入格式	在 `onChange` 中过滤或转换输入内容，限制用户只能输入特定格式（如电话号码）
多个输入联动	一个输入框的值变化时，自动计算或更新另一个输入框的值

四、性能优化

受控组件每次输入都会触发 state 更新和整个组件的重新渲染。当表单较复杂时，可以考虑以下优化方式：

状态提升到最小公共父组件——避免跨越多层组件传递 state，减少不必要的中间渲染。
使用 debounce / throttle 控制更新频率——对高频输入（如搜索框）做防抖处理，降低 state 更新次数。
必要时使用非受控组件——如果不需要即时反馈（例如只在提交时取值），用 useRef 替代 useState 可以完全跳过重新渲染。

五、注意事项

value 不能为 undefined 或 null——React 会因此将组件视为非受控组件，并在控制台打印警告。
只需要默认值时用 defaultValue——defaultValue 设置初始值但不接管后续更新，适合非受控场景。
受控组件必须搭配 onChange——没有 onChange 的表单元素会被 React 锁定为只读，无法响应用户输入。

React 受控组件

On this page