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

import React, { Component } from 'react';

class FilteredList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: ['Option 1', 'Option 2', 'Option 3'], // 所有选项
      selectedOptions: [], // 选中的选项
    };
  }

  handleOptionChange(option) {
    const { selectedOptions } = this.state;
    if (selectedOptions.includes(option)) {
      // 如果已选中，则移除
      this.setState({
        selectedOptions: selectedOptions.filter((item) => item !== option),
      });
    } else {
      // 如果未选中，则添加
      this.setState({
        selectedOptions: [...selectedOptions, option],
      });
    }
  }

  render() {
    const { options, selectedOptions } = this.state;
    // 根据选中选项过滤列表
    const filteredList = this.props.list.filter((item) =>
      selectedOptions.includes(item.category)
    );

    return (
      <div>
        <div>
          {options.map((option) => (
            <label key={option}>
              <input
                type="checkbox"
                value={option}
                checked={selectedOptions.includes(option)}
                onChange={() => this.handleOptionChange(option)}
              />
              {option}
            </label>
          ))}
        </div>
        <ul>
          {filteredList.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default FilteredList;