React 基于 Antd组件进行删除封装

原创已于 2023-04-14 17:34:58 修改 · 314 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #react #anti-design-vue

于 2023-04-14 17:30:36 首次发布

该代码片段展示了如何在React应用中利用antd库的Modal组件创建一个确认删除的对话框。当用户点击删除时，会弹出一个模态框，包含警告图标和操作按钮。如果用户确认删除，会调用回调函数并处理成功或失败的响应。

import {
  message,
    Modal
} from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;
export const handleDeleteAssets = (handleCallbackFun, handleDeleteOkCallback) => {
    confirm({
        title: '确定要删除吗?',
        icon: <ExclamationCircleOutlined/>,
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk: async() => {
          const values = await handleCallbackFun();
          if(values.code === 20000) {
            message.success('删除成功')
            handleDeleteOkCallback()
          }else{
            message.error(values.msg)
          }
        }
      });
}