解决message(antd-design组件库)弹窗多次数出现的问题

news2024/12/23 17:35:39

当我们多次点击按钮的时候,会出现下图这样的情况:

网址: 全局提示 Message - Ant Design

这样看起来,会降低用户的体验。所以,我想要的效果是,点一次出现一次,当我再次点击的时候,会销毁上次的,出现本次的。也就是说点一次,就出现一个提示。

解决问题的核心代码:

message.destroy();

message.success("删除成功");

本地验证

参考文章【react项目+antd组件-demo:hello-world_西晋的no1的博客-CSDN博客】,将 全局提示 Message - Ant Design 中下述代码复制覆盖App2.js中的全部代码,启动代码,可在本地点击按钮【Success】,在本地复现上述message弹窗多次数出现的现象。

在success 函数中添加一行代码【messageApi.destroy();】,再点击按钮【Success】,message弹窗多次数出现的现象消失,但是点击按钮【Error】或【Warning】message弹窗多次数出现的现象依然存在。

const success = () => {

            messageApi.destroy();

            messageApi.open({

                  type: 'success',

                  content: 'This is a success message',

            });

      };

本文参考了文章:  解决message(antd-design组件库)弹窗多次数出现的问题_js 仿ant.design气泡弹窗_一枚程序鱼的博客-CSDN博客

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

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

相关文章

二叉搜索树桶排序

1、二叉搜索树又称二叉排序树,它或者是一棵空树,或者是具有以下性质的二叉树 *若它的左子树不为空则左子树上所有的节点的值都小于根节点的值 *若它的右子树不为空则右子树上所有的节点的值都大于根节点的值 *它的左右子树也分别是一棵二叉搜索树 *二…

皮卡丘CSRF

1.CSRF(get) 首先看提示,我们选择用户kobe,密码123456登录 点击修改个人信息,假如用户要把住址改为shanxi 再点击submit,同时用bp抓包,我们可以看到是get请求,数据包含在URL之中 将…

web服务器有哪些

<1>什么是web服务器 “网络服务”&#xff08;Web Service&#xff09;的本质&#xff0c;就是通过网络调用其他网站的资源。 Web Service架构和云 如果一个软件的主要部分采用了”网络服务”&#xff0c;即它把存储或计算环节”外包”给其他网站了&#xff0c;那么我…

【Linux网络编程】HTTPS协议原理

https协议原理 一、HTTPS是什么二、基本概念2.1、什么是加密2.2、为什么要加密 三、常见的加密方式四、数据摘要(指纹)&&数字签名五、HTTPS的工作过程探究方案&#xff08;1&#xff09;&#xff1a;只使用对称加密方案&#xff08;2&#xff09;&#xff1a;只使用非对…

论文笔记--PANGU-α

论文笔记--PANGU-α: LARGE-SCALE AUTOREGRESSIVE PRETRAINED CHINESE LANGUAGE MODELS WITH AUTO-PARALLEL COMPUTATION 1. 文章简介2. 文章概括3 文章重点技术3.1 Transformer架构3.2 数据集3.2.1 数据清洗和过滤3.2.2 数据去重3.2.3 数据质量评估 4. 文章亮点5. 原文传送门6…

旧改快讯--罗湖蔡屋围项目二期子项目D、E启动行政征收

蔡屋围城市更新统筹片区蔡屋围&#xff08;城中村&#xff09;项目二期子项目D&#xff08;南村片区&#xff09;、子项目E&#xff08;南村东片区&#xff09;房屋征收提示 5月9日&#xff0c;深圳市罗湖区城市更新和土地整备局发布关于罗湖区桂园街道蔡屋围城市更新统筹片区…

[架构之路-204]- 常见的需求分析技术:结构化分析与面向对象分析

目录 前言&#xff1a; 1 1 . 3 需求分析概述 导言&#xff1a; 11.3.1需求分析的任务 (1) 绘制系统上下文范围关系图&#xff1a; (2) 创建用户界面原型&#xff1a; (3) 分析需求的可行性&#xff1a; (4) 确定需求的优先级&#xff1a; (5) 为需求建立模型&#xf…

DetailGAN

1.摘要 本文提出了一种基于保留细节的对抗学习的红外和可见光图像融合的端到端模型。它能够克服传统融合方法中基于活动级别测量和融合规则的手动和复杂设计的局限性。考虑到红外和可见光图像的特定信息&#xff0c;我们设计了两个损失函数&#xff0c;包括细节损失和目标边缘…

738.单调递增的数字;968.监控二叉树

贪心 738.单调递增的数字思路:代码 968.监控二叉树思路:如何放置&#xff0c;才能让摄像头最小的呢&#xff1f; 738.单调递增的数字 思路: 举例&#xff0c;数字&#xff1a;332&#xff0c;从前向后遍历的话&#xff0c;那么就把变成了329&#xff0c;此时2又小于了第一位的…

mysql密码字段类型

数值 mysql 的数值数据类型可以大致划分为两个类别&#xff0c;一个是整数&#xff0c;另一个是浮点数或小数。 许多不同的子类型对这些类别中的每一个都是可用的&#xff0c;每个子类型支持不同大小的数据&#xff0c;并且 MySQL 允许我们指定数值字段中的值是否有正负之分(U…

【owt】WebrtcNode, subscribe流程

subscribe流程 1. AmqpClient - New message received 2023-04-26T21:54:18.415 - DEBUG: AmqpClient - RpcServer New message received {method: subscribe,args: [b149e44bb10d4e91bd162a8c6806ae7b,webrtc,{transportId: b149e44bb10d4e91bd162a8c6806ae7b,tracks: [Arr…

C4网络技术挑战赛 智慧园区方案分析

添加链接描述 智慧园区网络 市场现状: 网络与应用系统多厂商、多平台、多系统,导致IT部门管理运维复杂&#xff0c;效率低下. 统一运维管理&#xff1f; 无线网络与物联网的双网合一&#xff1f; ps&#xff1a; 无线网络(英语:Wireless network)指的是任何型式的无线电计…

【Mysql数据库从0到1】-入门基础篇--mysql基本使用

【Mysql数据库从0到1】-入门基础篇--mysql基本使用 &#x1f53b;一、Mysql5.7 VS Mysql8.0 详解1.1 ⛳字符编码1.2 ⛳用户的创建与授权1.3 ⛳ 认证插件1.4 ⛳ 隐藏索引1.5 ⛳ 持久化设置1.6 ⛳ 通用表表达式&#xff08;Common Table Expressions&#xff09;1.7 ⛳ 性能提升1…

redis缓存单体服务测试本地锁失效问题

测试1&#xff1a;锁释放之后向redis缓存存入数据 //TODO 产生堆外内存溢出 OutOfDirectMemoryError//gulimall.com查询分类Overridepublic Map<String, List<CategoryLevel2Vo>> getCatelogJson() {/*** 问题 &#xff1a;解决办法* 1.缓存穿透 高并发情况下查询缓…

Java学习方式分享

哈喽&#xff0c;大家好呀&#xff0c;好久不见&#xff01;咱依然是那个腼腆害羞内向社恐文静、唱跳rap篮球都不大行的【三婶er】 坦白地说&#xff0c;今天是偶然看到C站这个活动的&#xff0c;这个主题我颇有感触&#xff0c;刚学java时的场景&#xff0c;历历在目。所以今天…

ChatGPT常见的报错解决方法(全网最全解决方法)

因为最近在使用ChatGPT的过程中&#xff0c;时常会出现一些错误提示&#xff0c;为了方便自己快速解决问题&#xff0c;所以也搜集了一些其他博主的解决方法&#xff0c;以下是整理的内容。 目录 1、拒绝访问 2、Access denied错误 3、We have detected suspicious 错误 4…

leetcode_19_相同的树

bool isSameTree(struct TreeNode* p, struct TreeNode* q){if(pNULL && qNULL)return true;//其中一个为空if(pNULL || qNULL)return false;//都不为空,且首节点的值不相等if(p->val ! q->val)return false;//p和q的值相等&#xff0c;分别比较左子树和右子树re…

如何使用debugHunter发现隐藏调试参数和Web应用程序敏感信息

关于debugHunter debugHunter是一款针对Web应用程序隐藏调试参数和敏感信息的识别扫描工具,该工具本质上是一个Chrome扩展,可以帮助广大研究人员扫描目标Web应用程序/网站以查找调试参数,并在发现了包含修改响应的URL时发送通知。该扩展利用了二分查找算法来有效地确定导致…

《基于Linux物联网综合项目》常见问题汇总fae

关于该课程说明 1&#xff09;本课程目标 通过web浏览器访问服务器&#xff0c;实现登录、注册、数据库操作、远程操控硬件、采集环境信息、远程监控、拍照、图片显示等功能。 将单片机、linux、html、摄像头、数据库等知识点融入到一个项目中。 2&#xff09;什么群体适合学…

JVM 虚拟机栈介绍

一、虚拟机栈&#xff08;VM Stack&#xff09; 1.1&#xff09;什么是虚拟机栈 虚拟机栈是用于描述java方法执行的内存模型。 每个java方法在执行时&#xff0c;会创建一个“栈帧&#xff08;stack frame&#xff09;”&#xff0c;栈帧的结构分为“局部变量表、操作数栈、动态…