好的，这里是一个简单的de
mo代码，主要使用了
antd的
Modal和Table组件：
```jsx
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 BatchSelect
Modal(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 De
mo() {
const [visible, setVisible] = useState(false);
const [selectedData, setSelectedData] = useState([]);
const handleShow
Modal = () => {
setVisible(true);
};
const handle
ModalOk = (selectedRows) => {
setSelectedData(selectedRows);
setVisible(false);
};
const handle
ModalCancel = () => {
setVisible(false);
};
return (
<div>
<Button onClick={handleShow
Modal}>Select Data</Button>
<p>Selected Data:</p>
<ul>
{selectedData.map((item) => (
<li key={item.key}>
{item.name} ({item.age}) - {item.address}
</li>
))}
</ul>
<BatchSelect
Modal
visible={visible}
onOk={handle
ModalOk}
onCancel={handle
ModalCancel}
/>
</div>
);
}
export default De
mo;
```
在上面的代码
中，我们定义了一个`BatchSelect
Modal`组件，它包含了一个
antd的
Modal和Table组件，用于批量选择数据。在这个组件
中，我们使用了useState来管理选
中的行信息。当用户选择行时，我们会更新selectedRowKeys和selectedRows。当用户点击确认
按钮时，我们会调用父组件传递进来的onOk回调函数，将选
中的行信息传递给父组件。在父组件
中，我们使用useState来管理选
中的数据，并将其渲染到页面上。
5673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
