当前位置：首页 > React

react如何实现受控组件

2026-03-31 16:13:47React

受控组件的基本概念

在React中，受控组件是指表单元素（如input、textarea、select）的值由React的状态（state）控制，并通过事件处理函数更新状态。用户输入时，状态同步更新，从而实现数据流的单向绑定。

实现步骤

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

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

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

react如何实现受控组件

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

处理输入事件
编写事件处理函数（如onChange），调用状态更新函数（setInputValue）同步用户输入到状态：

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('');
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>
);