react antd button delete confirm

在react中使用antd删除按钮，需要确认是否删除：(使用onclick事件进行绑定)

引入antd的model.confirm :

import { Button, Modal, message } from 'antd';

完整的示例：

import React from 'react';
import { Button, Modal, message } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
class MyComponent extends React.Component {
handleDeleteClick = async (id) => {
try {
Modal.confirm({
title: '确认删除',
content: '确定要删除吗？',
onOk: async () => {
await axios.delete(`${Config.BASE_URL}/api/v1/materials/${id}?token=${getToken()}`);
// 更新状态中的数据
const newData = this.state.data.filter(item => item.id !== id);
this.setState({ data: newData });
message.success('删除成功！');
},
onCancel: () => {
// 取消删除
},
});
} catch (error) {
console.error(error);
message.error('删除失败，请重试！');
}
};
render() {
return (
<Button type="primary" danger onClick={() => this.handleDeleteClick(record.id)}>
<DeleteOutlined />
删除
</Button>
);
}
}