antd modal模态框里数据的批量选择，返回选中数据的信息。reacthooks 写一个小demo

好的，这里是一个简单的demo代码，主要使用了antd的Modal和Table组件：

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

const dataSource = [
  {
    key: '1',
    name: 'Mike',
    age: 32,
    address: '10 Downing Street'
  },
  {
    key: '2',
    name: 'John',
    age: 42,
    address: '10 Downing Street'
  },
  {
    key: '3',
    name: 'Tom',
    age: 28,
    address: '10 Downing Street'
  }
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address'
  }
];

function BatchSelectModal(props) {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [selectedRows, setSelectedRows] = useState([]);

  const onSelectChange = (selectedRowKeys, selectedRows) => {
    setSelectedRowKeys(selectedRowKeys);
    setSelectedRows(selectedRows);
  };

  const handleOk = () => {
    props.onOk(selectedRows);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange
  };

  return (
    <Modal
      title="Select Data"
      visible={props.visible}
      onOk={handleOk}
      onCancel={props.onCancel}
    >
      <Table
        dataSource={dataSource}
        columns={columns}
        rowSelection={rowSelection}
      />
    </Modal>
  );
}

function Demo() {
  const [visible, setVisible] = useState(false);
  const [selectedData, setSelectedData] = useState([]);

  const handleShowModal = () => {
    setVisible(true);
  };

  const handleModalOk = (selectedRows) => {
    setSelectedData(selectedRows);
    setVisible(false);
  };

  const handleModalCancel = () => {
    setVisible(false);
  };

  return (
    <div>
      <Button onClick={handleShowModal}>Select Data</Button>
      <p>Selected Data:</p>
      <ul>
        {selectedData.map((item) => (
          <li key={item.key}>
            {item.name} ({item.age}) - {item.address}
          </li>
        ))}
      </ul>
      <BatchSelectModal
        visible={visible}
        onOk={handleModalOk}
        onCancel={handleModalCancel}
      />
    </div>
  );
}

export default Demo;

在上面的代码中，我们定义了一个`BatchSelectModal`组件，它包含了一个antd的Modal和Table组件，用于批量选择数据。在这个组件中，我们使用了useState来管理选中的行信息。当用户选择行时，我们会更新selectedRowKeys和selectedRows。当用户点击确认按钮时，我们会调用父组件传递进来的onOk回调函数，将选中的行信息传递给父组件。在父组件中，我们使用useState来管理选中的数据，并将其渲染到页面上。