在listView中获取选中的项目并将其标记放入listBox中

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

const { Text } = Typography;

const MyComponent = () => {
  const [selectedItems, setSelectedItems] = useState([]);

  const handleItemClick = (item) => {
    const isSelected = selectedItems.includes(item);
    if (isSelected) {
      setSelectedItems(selectedItems.filter((selectedItem) => selectedItem !== item));
    } else {
      setSelectedItems([...selectedItems, item]);
    }
  };

  return (
    <div>
      <List
        dataSource={data}
        renderItem={(item) => (
          <List.Item onClick={() => handleItemClick(item)}>
            <Checkbox checked={selectedItems.includes(item)} />
            <Text>{item}</Text>
          </List.Item>
        )}
      />
      <ListBox selectedItems={selectedItems} />
    </div>
  );
};

const ListBox = ({ selectedItems }) => {
  return (
    <div>
      <h3>Selected Items:</h3>
      <ul>
        {selectedItems.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;