Modal的二次确认弹框触发时机

最新推荐文章于 2025-02-27 20:11:42 发布
最新推荐文章于 2025-02-27 20:11:42 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： React web前端 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44735018/article/details/123918321
版权
该博客介绍了在React项目中如何实现在用户尝试关闭包含表单的Modal时，根据表单内容是否有变化来决定是否显示二次确认弹窗。通过获取表单的当前值并与初始值进行对比，利用lodash库的isEqual方法判断两者是否相等。如果值未改变，则直接关闭Modal；反之，弹出确认对话框。

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

Modal的二次确认弹框触发时机

react中modal中的值变化了之后点击取消弹出二次确认弹窗，要是值没有变化可以直接关闭modal。

在项目里边有个需求，就是需要我们的modal弹窗（modal里边是表单）在点击关闭或者蒙层的时候，会根据表单里边的值是否修改而弹出二次确认弹窗
在这里插入图片描述
就是这样的需求
来看代码实现

 const onCancel = () => {
   
    const formValues = form.getFieldsValue(
最低0.47元/天 解锁文章
写C端，如何优雅的处理多个弹框的显示？(附带源码)
qq_34998786的博客
12-22 757
前言 最近写的移动端业务经常跟弹框打交道，偶尔处理对于多个弹框的显示问题也是捉襟见肘，特别是产品经常改需求，那么有没有一种优雅的解决方案去处理上面这种问题，或者说,淘宝、拼多多等是怎么处理这种问题的 由于项目一开始没有做好规划或者说一开始就不是你维护的，导致首页的弹窗组件可能放了十多个甚至更多，不仅是首页有，首页内又引入了十多个个子组件，这些子组件内也有弹框，另外子组件的子组件也可能存在弹框，每个弹窗都有对应的一组控制显隐逻辑，但是你不可能让所有符合显示条件的弹窗都全都一下子在首页弹出来，如何有顺序的管
有关多个模态框的弹出与销毁——丑九怪
丑九怪的博客
05-07 668
有关多个模态框的弹出与销毁——丑九怪 在编写代码的时候，我们很多情况下要用到模态框去阻止操作，或者说是等待某些代码执行完毕，那么势必就存在模态框的产生以及销毁问题，下面来看一些有关模态框的操作 模态框的产生：用一个线程单独生成一个模态框，这样就不会影响我们之后的操作，相当于和其他线程并行，互不影响，当关闭的时候，首先检查模态框是否已经显示完成，如果显示完成，则进行关闭，如果未显示完成，用isSh...
el-dialog 点开后背景是灰色，但是点击屏幕两次以后就又显示了
m0_52611940的博客
08-29 281
el-dialog 点开后背景是灰色，但是点击屏幕两次以后就又显示了
二次确认弹窗组件
m0_60671885的博客
02-06 534
二次弹窗组件
vue3+element-plus 二次确认弹窗
最新发布
billershi的博客
02-27 451
该组件用于在用户进行危险操作时，二次确认是否继续操作。
封装二次确认弹窗带input校验输入框
weixin_44582077的博客
07-04 832
实现二次确认弹窗带input校验输入框
react 二次确认框_React不确定
culuo8053的博客
08-05 986
react 二次确认框I've fallen in love with React.js and JSX over the years; state-based rendering and a logical workflow have made me see the light of this modern framework. That doesn't mean I don't sometim...
如何实现二次弹出提示窗口（利用confirm实现）
qq_38882976的博客
10-13 5178
一、实现功能：   1.点击保存时，弹出提示框：确定xxxx吗？ 如点击“确定”，提交表单    2.如果点击“取消”，返回原页面并保存之前已经填写的数据 二、实现步骤 1.在按钮中通过onclick调用javascript <input type="submit"  id="button" value="提交" onclick="return myfunction()" "&gt...
react hooks+antd实现一个弹窗2次封装
baidu_41601048的博客
11-04 2400
弹窗在项目业务中很常见，接下来我们将基于antd的Modal组件实现2次封装。比如我们这个组件就叫SelectCityDialog。 基本思路就是： （1）弹窗组件的显示和隐藏由SelectCityDialog内部一个变量visable来控制，而这个值为true或者false则是由我们传入的值来控制。也就是说父组件传值给SelectCityDialog控制显示和隐藏 （2）由于我们要在外部（父组件）来打开这个弹窗，所以我们要在外部定义一个变量比如我们就叫vis，它每次值的变化则会传递给SelectCi
19道高频vue面试题解答（上）
bb_xiaxia1998的博客
10-10 690
Mixin 使我们能够为 Vue 组件编写可插拔和可重用的功能。如果希望在多个组件之间重用一组组件选项，例如生命周期 hook、 方法等，则可以将其编写为 mixin，并在组件中简单的引用它。然后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优化于组件自已的 hook。
2023.7.13-人力资源后台管理系统
weixin_65590235的博客
07-13 765
hr--人力资源后台管理项目
关于el-form的取消方法触发两次el-dialog关闭
长街的随心博客
02-01 1142
关于elementui弹窗关闭回调两次
“二次确认”设计策略
asdasdasd23451的博客
11-14 872
二次确认什么时候用、怎么用
confirm多次点击确认，导致重复提交
漫随天外的博客
01-04 4489
if(isOK){ layer.confirm(‘该订单使用线下支付付款，只能进行差评投诉，确定要进行投诉?’, {icon: 3, title:’投诉确认’}, function(index){ $(“#userInfoComment”).submit(); layer.close(index);
使用this.$modal.confirm进行二次触发时会出现第二个对话框闪退的问题
吕小威的博客
12-30 4527
iview的警告弹窗使用 iview Modal 二次警告弹窗会出现第二个弹窗闪退 解决方法：添加延迟 this.$Modal.confirm({ title: '删除确认', okText: '是', cancelText: '否', content: '确认删除', onOk: () => { setTimeout(()=>{ this.$Modal.confirm({
BootStrap模态框实现确认弹窗
qq_43120504的博客
12-30 2572
BootStrap模态框实现确认弹窗 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html 文档使用介绍 用法 您可以切换模态框（Modal）插件的隐藏内容： 通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle=“modal”，同时设置 dat
【前端】如何优雅的解决按钮“重复点击”问题
热门推荐
weixin_55846296的博客
08-02 1万+
在项目中会有很多**按钮点击调取接口**的需求（比如：`提交`操作），很多业务用户会不自觉点两次或多次，就导致按钮**click方法会多次触发**，导致最后保存了**好几条一模一样的数据**，就会出现`脏数据`的情况......
mui中一次点击触发两次事件的问题解决
從吥蔣僦的博客
04-03 2822
在用mui的时候，项目写完后出现了点击一次触发两次的时间，刚开始以为是部分手机问题，在网上搜索也有说这个问题的，说部分安卓手机出现这种情况；但是我这每个手机都会发生，于是我仔细检查，发现引入了两次js，我注释掉一个后，没有这种问题了 ...
dialog第一个消失后再显示第二个
一名小安卓的博客
06-16 1045
逻辑 : 监听第一个dialog是否消失 -- setOnCancelListener AlertDialog.Builder updateDialog = new AlertDialog.Builder(mContext); updateDialog.setTitle("文字内容").setPositiveButton("右下角按钮内容", new DialogIn
angular nz-modal 框的二次确认
10-15
Angular 的 nz-modal 框（通常指的是 Angular UI (NG-ZORRO) 中的 modal 组件）有时候会需要添加二次确认功能，特别是在弹出重要操作的提示框时。二次确认通常会在用户点击确定按钮前显示一个警告或确认对话框，让用户再次确认他们的操作。这在处理删除、修改等有风险的操作时非常常见。 在 NG-ZORRO 的nz-modal组件中，你可以通过自定义模板或者使用其提供的指令和服务来实现这个功能。例如，你可以在modal内容区域加入一个确认按钮，然后编写一个点击事件处理器，在该处理器内先展示一个确认对话框（如 SweetAlert 或者 ng-confirm-click 等库），只有当用户确认了才执行实际的操作。 下面是一个简单的示例： ```html <ng-template #confirmModal let-c="close"> <button type="button" (click)="cancel()">取消</button> <button type="button" (click)="confirm(c)">确认</button> 这里显示你的操作详情... </ng-template> <button nz-button (click)="openModal('confirmModal')">执行操作</button> <nz-modal [(nzVisible)]="isModalVisible" [nzTitle]="'确认操作'" [nzContent]="confirmModal"></nz-modal> ``` 在这个例子中，`openModal`函数首先打开模态，并传递一个包含二次确认信息的模板引用`confirmModal`。`c`参数用于关闭模态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值