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

xiaohuichonga

已于 2023-04-14 17:34:58 修改

阅读量283

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript react anti-design-vue

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

本文链接：https://blog.youkuaiyun.com/xiaohuichonga/article/details/130158699

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
          }
        }
      });
}