使用Antd (Ant -design) React js删除多选列表中选择列表的计数

import React, { useState } from 'react';
import { Checkbox, Button } from 'antd';

const MultiSelectList = () => {
  const [selectedOptions, setSelectedOptions] = useState([]);

  const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];

  const handleOptionChange = (option) => {
    if (selectedOptions.includes(option)) {
      setSelectedOptions(selectedOptions.filter((item) => item !== option));
    } else {
      setSelectedOptions([...selectedOptions, option]);
    }
  };

  const handleDeleteSelected = () => {
    const updatedOptions = options.filter((option) => !selectedOptions.includes(option));
    // 更新多选列表的选项
    // ...
    setSelectedOptions([]);
  };

  return (
    <div>
      {options.map((option) => (
        <Checkbox
          key={option}
          checked={selectedOptions.includes(option)}
          onChange={() => handleOptionChange(option)}
        >
          {option}
        </Checkbox>
      ))}
      <Button onClick={handleDeleteSelected}>删除选中项</Button>
    </div>
  );
};

export default MultiSelectList;