React中的多复选框过滤

import React, { useState } from 'react';

const FilterComponent = () => {
  const [checkbox1, setCheckbox1] = useState(false);
  const [checkbox2, setCheckbox2] = useState(false);
  const [data, setData] = useState([
    { name: 'Item 1', category: 'Category A' },
    { name: 'Item 2', category: 'Category B' },
    { name: 'Item 3', category: 'Category A' },
    // ...
  ]);

  const handleCheckbox1Change = () => {
    setCheckbox1(!checkbox1);
  };

  const handleCheckbox2Change = () => {
    setCheckbox2(!checkbox2);
  };

  const filteredData = data.filter(item => {
    if (checkbox1 && checkbox2) {
      return true; // 显示所有数据
    } else if (checkbox1) {
      return item.category === 'Category A';
    } else if (checkbox2) {
      return item.category === 'Category B';
    } else {
      return false; // 不显示任何数据
    }
  });

  return (
    <div>
      <label>
        <input type="checkbox" checked={checkbox1} onChange={handleCheckbox1Change} />
        Category A
      </label>
      <label>
        <input type="checkbox" checked={checkbox2} onChange={handleCheckbox2Change} />
        Category B
      </label>

      <ul>
        {filteredData.map(item => (
          <li key={item.name}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default FilterComponent;