选中/取消选中复选框时管理状态- React

在React中管理复选框的状态通常涉及到组件的本地状态（state）。以下是一些基础概念和相关信息：

基础概念

状态（State）：React组件中的一个对象，用于存储和管理组件的动态数据。
事件处理（Event Handling）：React允许你通过事件处理器来响应用户的交互，例如点击复选框。
受控组件（Controlled Components）：在React中，受控组件是指其值由React状态管理的表单元素。

类型

单选按钮（Radio Buttons）
复选框（Checkboxes）
下拉菜单（Select Dropdowns）

应用场景

表单填写：用户需要选择多个选项时。
过滤和排序：根据用户的选择动态显示内容。
权限管理：根据用户的勾选状态授予或撤销权限。

示例代码

以下是一个简单的React组件示例，展示了如何管理复选框的状态：

import React, { useState } from 'react';

function CheckboxList() {
  const [checkedItems, setCheckedItems] = useState({});

  const handleCheckboxChange = (event) => {
    setCheckedItems({
      ...checkedItems,
      [event.target.name]: event.target.checked,
    });
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          name="item1"
          checked={checkedItems.item1 || false}
          onChange={handleCheckboxChange}
        />
        Item 1
      </label>
      <br />
      <label>
        <input
          type="checkbox"
          name="item2"
          checked={checkedItems.item2 || false}
          onChange={handleCheckboxChange}
        />
        Item 2
      </label>
      <br />
      <label>
        <input
          type="checkbox"
          name="item3"
          checked={checkedItems.item3 || false}
          onChange={handleCheckboxChange}
        />
        Item 3
      </label>
    </div>
  );
}

export default CheckboxList;