在antd React表中使用popconfirm,可以通过以下步骤实现:
import { Table, Popconfirm, message } from 'antd';
import React from 'react';
const data = [
{
key: '1',
name: 'John Doe',
age: 32,
address: 'New York',
},
// 其他数据行...
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
{
title: 'Action',
key: 'action',
render: (text, record) => (
<Popconfirm
title="Are you sure you want to delete this record?"
onConfirm={() => handleDelete(record.key)}
okText="Yes"
cancelText="No"
>
<a href="#">Delete</a>
</Popconfirm>
),
},
];
handleDelete
,并在确认删除时显示一条消息:const handleDelete = (key) => {
// 执行删除操作的逻辑,可以发送请求到后端进行删除
message.success('Record deleted successfully');
};
class MyComponent extends React.Component {
render() {
return (
<Table dataSource={data} columns={columns} />
);
}
}
这样,当用户点击"Delete"链接时,将会显示一个确认框(popconfirm),询问用户是否确定删除该记录。如果用户确认删除,将会调用handleDelete
函数进行删除操作,并显示一条删除成功的消息。
注意:以上代码示例中,没有提及具体的腾讯云产品和链接地址,因为antd是一个UI组件库,并不直接与云计算相关。如果你需要在腾讯云中使用antd React表格,你可以结合腾讯云的其他产品和服务进行开发,例如使用腾讯云函数计算(SCF)作为后端处理删除操作,使用腾讯云消息队列(CMQ)发送消息通知等。具体的腾讯云产品和链接地址可以根据你的实际需求进行选择和使用。
领取专属 10元无门槛券
手把手带您无忧上云