当前位置：首页 > React

react内部是如何控制input

2026-01-25 07:02:03React

React 通过受控组件（Controlled Components）和非受控组件（Uncontrolled Components）两种方式管理输入元素（如 <input>）。以下是具体实现机制：

受控组件的值由 React 的 state 驱动，并通过 onChange 事件同步更新。其核心逻辑如下：

状态绑定
Input 的 value 属性直接绑定到组件的状态变量（如 this.state.value 或 useState 的变量）。此时输入框的显示值完全由 React 控制。
```
const [value, setValue] = useState('');
<input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
```
事件处理
用户输入时触发 onChange 事件，调用状态更新函数（如 setValue），将输入的新值同步到状态。React 随后重新渲染组件，更新输入框的显示值。
单向数据流
数据流动方向为：state → input DOM → onChange → state，形成闭环。这种模式符合 React 的单向数据流原则。

非受控组件的值由 DOM 自身管理，React 仅在需要时通过 ref 获取 DOM 节点的值。典型场景包括文件输入（<input type="file">）或表单提交时一次性取值。

Ref 绑定
使用 useRef 或 createRef 创建引用，并将其附加到输入元素。

const inputRef = useRef(null);
<input type="text" ref={inputRef} defaultValue="Initial" />

取值时机
在提交表单或事件触发时，通过 ref.current.value 直接读取 DOM 的值。
```
const handleSubmit = () => {
  console.log(inputRef.current.value);
};
```
默认值
可通过 defaultValue（普通输入）或 defaultChecked（复选框）设置初始值，但后续更新需手动操作 DOM。

防抖与节流
高频输入场景（如搜索框）可通过防抖（Debounce）或节流（Throttle）减少 onChange 触发的渲染次数。
合成事件（SyntheticEvent）
React 的 onChange 事件是合成事件，行为与原生 input 事件一致，会在每次按键后触发，而非原生 change 事件的失焦后触发。
不可控场景
若手动修改输入框的 value 属性（如通过浏览器插件），React 会强制将其重置为 state 中的值，确保受控组件的唯一真相源特性。