在React Js中使用多个CheckBoxes过滤列表

在React JS中，使用多个复选框（CheckBoxes）来过滤列表是一个常见的需求。以下是这个问题的基础概念、相关优势、类型、应用场景以及解决方案。

基础概念

React JS: 一个用于构建用户界面的JavaScript库。
复选框（CheckBoxes）: HTML元素，允许用户从多个选项中选择一个或多个选项。
状态管理: 在React中，使用useState钩子来管理组件的状态。

类型

单选复选框: 只能选择一个选项。
多选复选框: 可以选择多个选项。

应用场景

产品筛选: 在电商网站中，用户可以根据多个条件（如颜色、尺寸）筛选商品。
数据报告: 用户可以选择不同的数据维度来生成报告。
设置选项: 用户可以选择多个设置选项来定制应用。

解决方案

以下是一个简单的示例，展示如何在React JS中使用多个复选框来过滤列表。

示例代码

import React, { useState } from 'react';

const FilteredList = () => {
  const [filters, setFilters] = useState({
    red: false,
    blue: false,
    green: false,
  });

  const items = [
    { id: 1, color: 'red', name: 'Apple' },
    { id: 2, color: 'blue', name: 'Banana' },
    { id: 3, color: 'green', name: 'Cherry' },
    { id: 4, color: 'red', name: 'Date' },
  ];

  const handleFilterChange = (event) => {
    const { name, checked } = event.target;
    setFilters({
      ...filters,
      [name]: checked,
    });
  };

  const filteredItems = items.filter((item) =>
    Object.keys(filters).every(
      (color) => !filters[color] || item.color === color
    )
  );

  return (
    <div>
      <div>
        <label>
          <input
            type="checkbox"
            name="red"
            checked={filters.red}
            onChange={handleFilterChange}
          />
          Red
        </label>
        <label>
          <input
            type="checkbox"
            name="blue"
            checked={filters.blue}
            onChange={handleFilterChange}
          />
          Blue
        </label>
        <label>
          <input
            type="checkbox"
            name="green"
            checked={filters.green}
            onChange={handleFilterChange}
          />
          Green
        </label>
      </div>
      <ul>
        {filteredItems.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default FilteredList;