Antd v5.8 modal.confirm 手动控制关闭

开发中经常需要使用操作提示弹窗,在 Antd 中的 Modal 组件提供了 confirm 方法,可以快速实现操作提示弹窗。本文就来介绍一下如何使用 Modal.useModal 创建弹窗,并且实现手动控制弹窗的关闭逻辑。

Antd Modal.confirm

一、代码演示

import { message, Modal } from 'antd'
import { forwardRef, useImperativeHandle } from 'react'
import { delQue } from '@/api/question.js'
import { useQuestionStore, QuestionGetters } from '@/store/question.js'const Com = ({ getList }, ref) => {useImperativeHandle(ref, () => ({showModal,}))const [modal, contextHolder] = Modal.useModal()const { setColl, changeTime } = useQuestionStore()const submit = async ({ id, key }, e) => {try {let { code, msg, records } = await delQue({collId: id,resourceType: key,})if (code === 0) {message.success('删除成功')let coll = QuestionGetters('coll')if (`${id}` === coll.id + '') {setColl({type: coll.type,id: '',})changeTime({coll: Date.now(),})} else {getList()}/* 关键步骤 2 */await e()}} catch (e) {console.log(e)}}const showModal = async (data) => {let { collName } = dataconst confirmed = await modal.confirm({title: '确认删除问题集?',content: <div>此问题集中所有资源都将被删除,确认删除"{collName}"?</div>,onCancel() {console.log('cancled')},/* 关键步骤 1 */onOk(e) {submit(data, e)},})console.log('Confirmed: ', confirmed)}return <>{contextHolder}</>
}export default forwardRef(Com)

二、代码解读

onOk 事件: 点击确定回调,参数为关闭函数,返回 promiseresolve 后自动关闭。这个参数很关键,我们可以通过这个参数来手动控制弹窗的关闭。

详见:
关键步骤 1:传出去的 onOk 事件,调用 submit 方法,传入 data 和 e,e 即为关闭函数,调用 e 即可关闭弹窗。
关键步骤 2:在 submit 方法中,根据接口请求结果,code===0 成功,则调用 e 即可关闭弹窗;否则不关闭弹窗。


欢迎访问:天问博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/221490.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

禾匠榜店商城系统 RCE漏洞复现

0x01 产品简介 禾匠榜店商城系统是浙江禾匠信息科技有限公司的一套基于PHP和MySQL的商城系统。 0x02 漏洞概述 禾匠榜店商城系统的api/testOrderSubmit模块下的preview方法存在命令执行漏洞,攻击者可以向服务器写入木马文件,直接获取服务器权限 0x03 漏洞概述 FOFA:bod…

带你手把手解读firejail沙盒源码(0.9.72版本) (三) fcopy

文章目录 main.c该模块的各个函数功能详解selinux_relabel_pathcopy_filemkdir_attrcopy_linkproc_pid_to_selffs_copydircheckduplicate_dirduplicate_fileduplicate_linkmain Makefile main.c 文件总结 ├── fcopy │ ├── Makefile │ └── main.cmain.c #include…

【腾讯云HAI域探密】- HAI为NPL保驾护航

近些年&#xff0c;随着机器学习技术的蓬勃发展&#xff0c;以GPU为代表的一系列专用芯片以优越的高性能计算能力和愈发低廉的成本&#xff0c;在机器学习领域得到广泛认可和青睐。GPU等专用芯片以较低的成本提供海量算力&#xff0c;已经成为机器学习和AI人工智能领域的核心利…

用EXCEL计算NTC、BS、电压等AD参数

前言 之前计算NTC的AD值算得很麻烦&#xff0c;因为51内核的单片机不支持除法运算&#xff0c;更别说浮点运算了。 EXCEL自动算出参数就显得很方便了。 有纰漏请指出&#xff0c;转载请说明。 学习交流请发邮件 1280253714qq.com 理论基础 参考这篇文章NTC热敏电阻温度采集…

企业数字化转型进入深海区:生成式AI时代下如何制定数据战略

云计算适用于任何人&#xff0c;任何企业&#xff0c;云计算的分支——人工智能(AI)正发展的迅疾如火&#xff0c;炙手可热。特别是ChatGPT已经挑战各行各业对于AI的认知。 作为全球云计算领域的年度风向标活动&#xff0c;12月12日&#xff0c;亚马逊云科技2023 re:Invent中国…

Web漏洞分析-文件解析及上传(下)

随着互联网的迅速发展&#xff0c;网络安全问题变得日益复杂&#xff0c;而文件解析及上传漏洞成为攻击者们频繁攻击的热点之一。本文将深入研究文件解析及上传漏洞&#xff0c;通过对文件上传、Web容器IIS、命令执行、Nginx文件解析漏洞以及公猫任意文件上传等方面的细致分析&…

基于C/C++的非系统库自定义读写ini配置

INI文件由节、键、值组成。 节 [section] 参数 &#xff08;键值&#xff09; namevalue 这里将常用的操作方式封装成了一个dll供外部使用 // 下列 ifdef 块是创建使从 DLL 导出更简单的 // 宏的标准方法。此 DLL 中的所有文件都是用命令行上定义的 LIBCFG_EXPORTS // 符号…

有什么简单实用的民宿管理系统软件?民宿如何开拓盈利渠道?

民宿是近些年兴起的一种小型住宿设施&#xff0c;一般就是利用当地的一些民房改造的。民宿的装修风格一般更加具有本土风味&#xff0c;很适合拍照打卡。不过民宿由于规模比较小&#xff0c;所以员工一般也不多&#xff0c;很多民宿的入住登记都要旅客自己弄。所以有很多民宿会…

Apache DolphinScheduler 社区荣获 “2023 年度优秀开源技术团队“ 奖项

在开源社区日益繁荣的今天&#xff0c;我们非常荣幸地宣布&#xff1a;Apache DolphinScheduler 社区在 OSCHINA 平台的评选中荣获了“2023 年度优秀开源技术团队”奖项。这一奖项反映了我们社区在过去一年里在内容发表的深度与广度、活动运营影响力以及对开源文化的推广方面所…

AGILE-SCRUM

一个复杂的汽车ECU开发。当时开发队伍遍布全球7个国家&#xff0c;10多个地区&#xff0c;需要同时为多款车型定制不同的软件&#xff0c;头疼的地方是&#xff1a; 涉及到多方人员协调&#xff0c;多模块集成和管理不同软件团队使用的设计工具、验证工具&#xff0c;数据、工…

如何在本地搭建Oracle数据库并实现无公网ip通过PLSQL工具远程连接数据库

文章目录 前言1. 数据库搭建2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射 3. 公网远程访问4. 配置固定TCP端口地址4.1 保留一个固定的公网TCP端口地址4.2 配置固定公网TCP端口地址4.3 测试使用固定TCP端口地址远程Oracle 正文开始前给大家推荐个网站&#xff0c;前些天发…

基于JAVA的校园电子商城系统论文

摘 要 网络技术和计算机技术发展至今&#xff0c;已经拥有了深厚的理论基础&#xff0c;并在现实中进行了充分运用&#xff0c;尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代&#xff0c;所以对于信息的宣传和管理就很关键。因此校园购物信息的…

西南科技大学数字电子技术实验七(4行串行累加器设计及FPGA实现)预习报告

一、计算/设计过程 说明&#xff1a;本实验是验证性实验&#xff0c;计算预测验证结果。是设计性实验一定要从系统指标计算出元件参数过程&#xff0c;越详细越好。用公式输入法完成相关公式内容&#xff0c;不得贴手写图片。&#xff08;注意&#xff1a;从抽象公式直接得出结…

大数据云计算——Docker环境下部署Hadoop集群及运行集群案列

大数据云计算——Docker环境下部署Hadoop集群及运行集群案列 本文着重介绍了在Docker环境下部署Hadoop集群以及实际案例中的集群运行。首先&#xff0c;文章详细解释了Hadoop的基本概念和其在大数据处理中的重要性&#xff0c;以及为何选择在Docker环境下部署Hadoop集群。接着&…

12.HTML5新特性

HTML5新特性 1.介绍 它是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言&#xff08;HTML&#xff09;的第五次重大修改。用于取代 HTML4 与 XHTML 的新一代标准版本&#xff0c;所以叫HTML5 HTML5 在狭义上是指新一代的 HTML 标准&#xff0c;在广义上是指…

云原生之深入解析K8s中的微服务项目设计与实现

一、微服务项目的设计 ① 微服务设计的思想 一个单片应用程序将被构建、测试并顺利地通过这些环境。事实证明&#xff0c;一旦投资于将生产路径自动化&#xff0c;那么部署更多的应用程序似乎就不再那么可怕了。请记住&#xff0c;CD的目标之一就是让部署变得无聊&#xff0c…

提升团队效率,防止员工飞单私单的秘诀!

在如今竞争激烈的商业环境中&#xff0c;每个企业都追求更高的销售业绩和客户满意度。然而&#xff0c;有些员工可能会利用V信等社交工具进行私下交易&#xff0c;导致公司的利益损失和客户信任的瓦解。所以&#xff0c;如何防止员工飞单私单成为了一个需要解决的问题。 在这里…

FL Studio20官方版怎么下载安装?2024最新版图文详细教程

水果音乐制作软件FL Studio2024是一款功能强大的软件音乐制作环境或数字音频工作站&#xff08;DAW&#xff09;&#xff0c;本文主要针对FL Studio 2024怎么安装&#xff1f;来为大家带来了水果软件FL Studio 2024安装图文详细教程&#xff01;水果音乐制作软件FL Studio2024版…

智能分析/可视化安防监控系统EasyCVR风光互补远程视频监控方案

一、背景需求 在一些偏远地区&#xff0c;也具有视频监控的需求。但是这类场景中&#xff0c;一般无法就近获取市电&#xff0c;如果要长距离拉取市电&#xff0c;建设的成本非常高且长距离传输有安全隐患&#xff0c;因此风光互补远程视频监控方案的需求也较多。利用风光电转…

TCP/IP 四层体系结构

目录 ​编辑 导言&#xff1a; 应用层 1. HTTP&#xff08;超文本传输协议&#xff09; 2. FTP&#xff08;文件传输协议&#xff09; 3. SMTP&#xff08;简单邮件传输协议&#xff09; 4. POP3&#xff08;邮局协议第3版&#xff09; 5. IMAP&#xff08;互联网消息访…