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

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;