当前位置：首页 > React

react如何实现受控组件

2026-03-10 16:48:35React

受控组件的基本概念

受控组件是指表单元素的值由React状态控制，并通过事件处理器同步更新。用户输入会触发状态变化，状态变化又会重新渲染组件并更新表单元素的值。

实现步骤

定义状态变量
在组件中声明一个状态变量，用于存储表单元素的值。例如使用useState钩子：

const [inputValue, setInputValue] = useState('');

绑定值到表单元素
将状态变量绑定到表单元素的value属性（或checked属性，针对复选框）。例如：

react如何实现受控组件

<input 
  type="text" 
  value={inputValue} 
  onChange={handleChange} 
/>

处理输入事件
编写事件处理函数（如onChange），通过事件对象获取用户输入的值，并更新状态：

const handleChange = (e) => {
  setInputValue(e.target.value);
};

常见表单元素示例

文本框

react如何实现受控组件

const [text, setText] = useState('');
return (
  <input 
    type="text" 
    value={text} 
    onChange={(e) => setText(e.target.value)} 
  />
);

复选框

const [isChecked, setIsChecked] = useState(false);
return (
  <input 
    type="checkbox" 
    checked={isChecked} 
    onChange={(e) => setIsChecked(e.target.checked)} 
  />
);

下拉选择框

const [selectedOption, setSelectedOption] = useState('option1');
return (
  <select 
    value={selectedOption} 
    onChange={(e) => setSelectedOption(e.target.value)}
  >
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
);

表单提交处理

通过onSubmit事件处理表单提交，阻止默认行为并处理数据：

const handleSubmit = (e) => {
  e.preventDefault();
  console.log('Submitted value:', inputValue);
};
return (
  <form onSubmit={handleSubmit}>
    <input type="text" value={inputValue} onChange={handleChange} />
    <button type="submit">Submit</button>
  </form>
);