react如何实现受控组件
受控组件的基本概念
在React中，受控组件是指表单元素（如input、textarea、select）的值由React的状态（state）控制，而不是由DOM自身管理。用户输入时，通过事件处理函数更新状态，从而实现数据流的单向绑定。
实现步骤
1. 定义状态
使用useState钩子声明一个状态变量，用于存储表单元素的值。例如：
const [inputValue, setInputValue] = useState('');2. 绑定值到表单元素
将状态变量赋值给表单元素的value属性（或checked属性用于复选框/单选按钮）。例如：
<input type="text" value={inputValue} />3. 处理输入变化
为表单元素添加onChange事件处理函数，通过事件对象（e）获取用户输入的值，并调用状态更新函数。例如：
const handleChange = (e) => {
setInputValue(e.target.value);
};
<input type="text" value={inputValue} onChange={handleChange} />完整示例
以下是一个受控输入框的完整代码示例：
import React, { useState } from 'react';
function ControlledInput() {
const [inputValue, setInputValue] = useState('');
const handleChange = (e) => {
setInputValue(e.target.value);
};
return (
<div>
<input
type="text"
value={inputValue}
onChange={handleChange}
placeholder="Type something..."
/>
<p>Current value: {inputValue}</p>
</div>
);
}
export default ControlledInput;其他表单元素的受控实现
1. 复选框（Checkbox）
使用checked属性绑定布尔值状态：
const [isChecked, setIsChecked] = useState(false);
const handleCheckboxChange = (e) => {
setIsChecked(e.target.checked);
};
<input
type="checkbox"
checked={isChecked}
onChange={handleCheckboxChange}
/>2. 下拉选择框（Select）
通过value属性绑定状态，处理onChange事件：
const [selectedOption, setSelectedOption] = useState('option1');
const handleSelectChange = (e) => {
setSelectedOption(e.target.value);
};
<select value={selectedOption} onChange={handleSelectChange}>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>注意事项
- 受控组件要求为每个表单元素设置
value（或checked）和onChange，否则会触发React的警告。 - 对于复杂的表单，可以使用第三方库（如
Formik）简化状态管理。 - 性能优化：频繁输入时（如实时搜索），可通过防抖（debounce）减少状态更新次数。
