当前位置：首页 > React

react如何实现受控组件

2026-01-24 08:38:38React

受控组件的基本概念

在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>