使用checkbox onChange在React中过滤卡

import React, { Component } from 'react';

class CardFilter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filters: {
        option1: false,
        option2: false,
        option3: false,
      },
      cards: [
        { id: 1, title: 'Card 1', option1: true, option2: false, option3: true },
        { id: 2, title: 'Card 2', option1: false, option2: true, option3: false },
        { id: 3, title: 'Card 3', option1: true, option2: true, option3: false },
      ],
    };
  }

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

  render() {
    const { filters, cards } = this.state;
    const filteredCards = cards.filter((card) => {
      return (
        (!filters.option1 || card.option1) &&
        (!filters.option2 || card.option2) &&
        (!filters.option3 || card.option3)
      );
    });

    return (
      <div>
        <form>
          <label>
            Option 1:
            <input
              type="checkbox"
              name="option1"
              checked={filters.option1}
              onChange={this.handleFilterChange}
            />
          </label>
          <label>
            Option 2:
            <input
              type="checkbox"
              name="option2"
              checked={filters.option2}
              onChange={this.handleFilterChange}
            />
          </label>
          <label>
            Option 3:
            <input
              type="checkbox"
              name="option3"
              checked={filters.option3}
              onChange={this.handleFilterChange}
            />
          </label>
        </form>
        <div>
          {filteredCards.map((card) => (
            <div key={card.id}>{card.title}</div>
          ))}
        </div>
      </div>
    );
  }
}

export default CardFilter;