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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了方便在 React 项目中使用 Ant Design 的 Loading 组件,可以封装一个 Loading 工具类,以便在需要时快速调用。 以下是一个基于 Ant Design 的 Loading 工具类的示例: ```jsx import { Spin } from 'antd'; // 加载中组件 const Loading = () => ( <div style={{ textAlign: 'center', marginTop: 50 }}> <Spin size="large" /> </div> ); // Loading 工具类 class LoadingUtil { static loadingInstance = null; static create() { if (!LoadingUtil.loadingInstance) { LoadingUtil.loadingInstance = Spin; } return LoadingUtil.loadingInstance; } static show() { const LoadingComponent = LoadingUtil.create(); LoadingUtil.loadingInstance = LoadingComponent; LoadingComponent.show(); } static hide() { const LoadingComponent = LoadingUtil.create(); LoadingUtil.loadingInstance = LoadingComponent; LoadingComponent.hide(); } } export default LoadingUtil; ``` 在上面的代码中,首先定义了一个 Loading 组件,它是 Ant Design Spin 组件的包装,用于显示加载中的效果。 然后定义了一个 LoadingUtil 类,它包含了三个静态方法: - `create()` 方法用于创建 Loading 组件实例; - `show()` 方法用于显示 Loading 组件; - `hide()` 方法用于隐藏 Loading 组件。 当需要显示 Loading 时,调用 `LoadingUtil.show()` 方法即可;当需要隐藏 Loading 时,调用 `LoadingUtil.hide()` 方法即可。 使用该 Loading 工具类的示例如下: ```jsx import React, { useState } from 'react'; import LoadingUtil from './LoadingUtil'; function MyComponent() { const [loading, setLoading] = useState(false); const handleButtonClick = () => { setLoading(true); LoadingUtil.show(); // 异步操作 setTimeout(() => { setLoading(false); LoadingUtil.hide(); }, 2000); }; return ( <div> <h1>My Component</h1> <button onClick={handleButtonClick}>Fetch Data</button> {loading && <Loading />} </div> ); } export default MyComponent; ``` 在上面的代码中,当用户点击按钮触发异步操作时,设置 `loading` 状态为 `true`,同时调用 `LoadingUtil.show()` 方法显示 Loading 组件。 当异步操作完成后,设置 `loading` 状态为 `false`,同时调用 `LoadingUtil.hide()` 方法隐藏 Loading 组件。最后在 JSX 中根据 `loading` 状态来决定是否渲染 Loading 组件
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值