首页 > 其他分享 >react antd 函数式弹窗案例

react antd 函数式弹窗案例

时间:2023-04-25 09:44:12浏览次数:36  
标签:checkReviewTaskTipModal mConfirm const react antd 弹窗 cancelFc

 

1.弹窗函数

export const checkReviewTaskTipModal = async (checkResult: {
  status: boolean;
  mseeage: string;
}) => {

  return new Promise((r, j) => {
    const cancelFc = () => {
      mConfirm?.destroy();
    };
    const mConfirm = Modal.confirm({
      className: 'checkReviewTaskTipModal',
      width: 420,
      icon: <ExclamationCircleFilled />,
      title: 'XXXXXX未完成,XXXXXX可能不准确,请选择操作:',
      mask: false,
      content: (
        <div className="checkReviewTaskTipModal-footer">
          <Button
            type="ghost"
            onClick={() => {
              r('toCancel');
              cancelFc();
            }}
          >
            取消
          </Button>
          <div className="checkReviewTaskTipModal-footer-action-right">
            <Button
              type="ghost"
              onClick={() => {
                r('toContinue');
                cancelFc();
              }}
            >
              仍然发起
            </Button>
            <Button
              type="primary"
              onClick={() => {
                r('toSetting');
                cancelFc();
              }}
            >
              前往设置
            </Button>
          </div>
        </div>
      ),
    });
  });
};

 

标签:checkReviewTaskTipModal,mConfirm,const,react,antd,弹窗,cancelFc
From: https://www.cnblogs.com/sangzs/p/17351686.html

相关文章

  • [REACT_DOC]-Quick Start
    目录QuickStart创建以及嵌套组件用JSX书写标记(markup)添加样式展示数据条件渲染列表渲染事件响应更新屏幕使用Hooks在组件之间共享数据QuickStart概览:如何创建以及嵌套组件如何添加markup和样式如何展示数据如何条件渲染,如何渲染列表如何响应事件并更新渲染如何......
  • 使用Ref还是Reactive?
    我喜欢Vue3的CompositionAPI,它提供了两种方法来为Vue组件添加响应式状态:ref和reactive。当你使用ref时到处使用.value是很麻烦的,但当你用reactive创建的响应式对象进行重构时,也很容易丢失响应性。在这篇文章中,我将阐释你如何来选择reactive以及ref。一句话总结:默认情况下使用......
  • React Native 桥接原生模块
    原生模块简介有时候一个RN应用需要访问一个原生平台的API比如相机,但是,默认情况下JavaScript是无法访问原生API的。原生模块系统暴露了一些Java类的实例对象给JavaScript,这样就可以允许开发者在JS代码中执行一些特定的原生代码。简单来说,桥接原生就是为了实现reac......
  • React、Ant Design 5.0 构建通用后台管理系统 - 接口服务环境搭建
    目录项目初始化项目结构package.jsontsconfig.jsonnodemon.jsonindex.tssrc/server.ts运行项目初始化mkdirgeneral-admin-system-servercdgeneral-admin-system-servernpminit-ynpminstalltypescriptts-node@types/nodenodemon@swc/core@swc/helpersregenerator-......
  • React、Ant Design 5.0 构建通用后台管理系统 - 登录页面
    目录安装依赖main.tsxsrc/styles/global.cssApp.tsxsrc/pages/user/Login/index.tsxsrc/pages/user/Login/style.module.css安装依赖npminstallantd@ant-design/icons@ant-design/pro-componentsAntDesign组件库@ant-design/pro-components封装一些好用的常用组件库mai......
  • SpringBoot+React 前后端分离
    SpringBoot+React前后端分离写个转发数据的小工具,本来只想开个SpringBoot服务带个页面,但感觉有点难受,正好之前研究了React,尝试一下前后端分离。后端简单用SpringBoot起个服务,写个接口处理请求:@RestController@RequestMapping("/data")publicclassDataController{......
  • react
    React是一个用于构建用户界面的JAVASCRIPT库。React主要用于构建UI,很多人认为React是MVC中的V(视图)。React起源于Facebook的内部项目,用来架设Instagram的网站,并于2013年5月开源。React拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。1.......
  • react18中antd的Upload组件上传头像,并且拿到服务器返回的头像的url地址在页面中显示头
    业务需求:上传头像,上传完毕后拿到头像的url,把头像展示在页面中,最终把头像url和其他用户信息一起发送给服务器 上传头像流程 导入Upload组件和图标(一个加号,一个加载中)import{Upload}from'antd';import{PlusOutlined,LoadingOutlined}from'@ant-design/ic......
  • vscode中react组件
    title:"vscode中ES7+React/Redux/React-Nativesnippets插件使用"date:2023-04-0723:21:32tags:['Vscode','插件']categories:["工具篇"]通过使用这个插件我们可以很方便的进行组件/方法/文件的导入本篇博客仅对插件进行介绍翻译,便于自己以后使用常用片段列表imr:......
  • AntdPro中formItemProps和fieldProps的区别
    title:AntdPro中formItemProps和fieldProps的区别date:2023-04-1312:50:23tags:["React","AntDesign"]categories:["前端篇"]最近在工作中接触到了antd和antdpro,作为一个react和antd新人,在学习和使用中遇到了不少的问题,下边就常见的一个问题来进行记录,后......