antd-Modal结合Promise，等待弹框返回值，再进行后续操作

最新推荐文章于 2024-01-30 23:11:02 发布

原创最新推荐文章于 2024-01-30 23:11:02 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端

这篇博客探讨了在数据加载过程中遇到的Modal弹窗样式定制问题，指出默认的Modal.info和Modal.success无法满足产品需求。作者通过展示Auauau()函数的使用，详细解释了如何在用户点击确认或取消按钮时执行不同的操作，从而实现更复杂的用户交互逻辑。

数据加载过程中，需要Modal弹框弹出，确认用户行为后，根据需要进行后续操作，Modal.info，Modal.success等不能满足产品样式需求，代码如下

Auauau().then(res=> {

点击确认按钮

})

.catch(error => {

点击取消按钮

})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

alisa_csdn

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

react等待请求返回数据后再次发起请求两组数据一起返回 service层

dsj_0516的博客

08-02

1083

export async function queryMapJsonData(params: any) { return request(`${Url.workbenchReport.url}/mapInfo`, { method: 'POST', body: params, }); } export async function queryMapData(params: paramsType) { const p1 = request(`${Url.workbenchRepo

vue3 把antd 的Modal组件作为子组件时，本地运行是没问题的，打包后 cancel关闭事件触发无效

agua001的博客

04-20

3268

vue3 把antd 的Modal组件作为子组件时，本地运行是没问题的，打包后 cancel关闭事件触发无效

参与评论您还未登录，请先登录后发表或查看评论

react-promise-modal:在React中执行模态的正确（简便）方式。有诺言

05-09

React承诺模式在React中使用模态的正确（简便）方式。有诺言。用法 reactModal()函数接受一个渲染回调，该回调根据给定的三个参数来渲染模态： show —布尔值，告诉窗口是否可见。用于输入/输出转换。主要旨在用作react-bootstrap Modal show属性。 onDismiss — onDismiss模式时应调用。始终将诺言解决为undefined 。 onSubmit在提交/确认模式时应调用。如果未提供任何参数，则解析为true 。但是您可以将任何值作为参数传递给已定义的解析值。出于显而易见的原因，不能undefined该值。该函数返回一个Promise ，如果提交模态时该模态被取消或为true （或您提供的任何值），则该Promise将以undefined方式进行解析。 import reactModal from '@prez

React使用antd组件Modal的两种方法

随手记的笔记

03-15

2783

1、使用pubSub订阅（使用immutable.js）发布 onClick = () => { const form = Immutable.fromJS(this.state.resumeInfo) PubSub.publish(FORM_EDIT_MODAL_OPEN, { status: 'edit', form }) } //发布的同时可以传递一个参数（此处是form），这里用的是immutable //可以深层次比较订阅 st

antd-modal

神zhi殇的博客

09-21

3983

nzMaskClosable：false;点击遮罩层是不允许关闭的；默认为true；

用React给XXL-JOB开发一个新皮肤（四）：实现用户管理模块

学习和工作总结，共勉！

01-30

1542

此篇文章介绍 xxl-job的用户管理模块的开发工程，重点介绍了下 antd 的表格组件、模态框组件和表单组件，快速实现一个 CRUD 模块。

React+AntD组件搭建后台管理系统（不定时更新）

weixin_48390287的博客

03-11

2505

项目描述该项目是属于一个前后台分离的后台管理的SPA，即单页Web应用（single page web application，SPA），包含了用户管理、商品分类管理、商品管理以及权限管理等功能模块，在技术方面采用的是React的相关知识、AntD组件以及Github第三方库进行模块化、工程化的模式开发。总的来说，这个后台管理系统实现的是增删改查的基本操作，但是对于像我这种前端小白来说还是收获匪浅，起码是对于一个项目的开发流程有所了解，现在根据每个组件记录一下学习历程，知识点的总结以及踩过的坑。提前声

Antd Vue中$confirm嵌入交互组件的实现方法

其提供的 `$confirm` 方法是 Modal 组件的一个便捷封装，用于快速弹出确认对话框，常用于删除提示、操作确认等场景。然而，默认的 `$confirm` 仅支持简单的文本提示与确定/取消按钮，难以满足复杂业务中需要用户输入...

Modal.warn 没有正确销毁

最新发布

02-26

这些方法通常会返回一个引用，可能用于后续的操作，比如关闭弹窗。如果Modal.warn没有正确销毁，可能是指弹窗关闭后，DOM元素仍然存在，或者相关的状态没有清理干净，导致内存泄漏或者其他异常。接下来，我应该...

RN使用react-native-image-picker + aliyun-oss-react-native上传图片

aieraflyyyy的博客

02-27

4541

RN使用react-native-image-picker + aliyun-oss-react-native 上传图片今天记录一下在RN使用react-native-image-picker以及aliyun-oss-react-native完成上传图片如果是原生和RN混合开发，首先执行以下代码： yarn add react-native-image-picker yarn add al...

antd.pro中Modal中传值回调

chenqk_123的专栏

08-05

4193

昨天解决了一个问题，关于"怎么在解决Modal中嵌套Form表单时，表单项的校验和表单项值获取的问题"，详见上一篇文章。继续在昨天的基础上做开发任务，出现了另外一个问题，在API数据流过程中，怎么数据回传的问题。我的需求是在list页面中会有弹出框Modal，然后在Modal中会嵌入一个组件(比如创建和修改组件)，当创建和修改组价表单提交时，经过数据交货，API调用，最后会返回response结果，然后根据response结果来控制Modal的显示/隐藏。因为创建成功，Modal应该消失，创建失败则消失

Antd模态框Modal内部组件数据回显

cake_eat的博客

06-05

1670

<Modal title="修改菜单" visible={isShowEdit} onCancel={()=>{ this.setState({isShowEdit:false}) }} footer={null} > <EditForm menu={menu} handleCancel={()=>{ this.setState({isShowEdit:false}) }}

基于React实现：弹窗组件与Promise的有机结合

乐闻世界

09-05

1070

日常开发工作中总有一些能够优化的步骤和流程，我们能够多思考一下，转变思路，就能够让我们的代码更加赏心悦目。

问题：antdv 在Modal中点击打开Modal，新的Modal显示在了前一个打开的Modal的下方

qq_44792224的博客

12-07

809

【代码】问题：antdv 在Modal中点击打开Modal，新的Modal显示在了前一个打开的Modal的下方。

【Antd+vue】antd Modal.confirm实现延迟关闭效果（点击确定，等待请求完成再关闭弹窗）弹出确认框

Java&Develop的博客

02-25

2502

【Antd+vue】antd Modal.confirm实现延迟关闭效果（点击确定，等待请求完成再关闭弹窗）

antd 弹窗使用问题

program_ape_lqh的博客

11-17

867

并且在用的时候得加let that = this;不然在onOk()里面用不到this。直接在调用的方法里用antd的modal.confirm的组件。今天做项目有个需求，需要确认弹窗。

得到promise

Rachel

09-14

474

所谓 Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。 Promise 对象有以下两个特点。（1）对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。

Antd Upload图片上传之前使用promise进行宽高的校验

qq_39897978的博客

05-28

1876

在写需求的时候要进行宽高的校验，再进行上传，可以使用promise来进行判断，是继续resolve（）还是reject（）使用示例（直接上代码） beforeUpload = (file) => { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; if (!isJpgOrPng) { message.error('You can only upload JPG/PNG

【Antd+vue】antd Modal.confirm实现延迟关闭效果（点击确定，等待请求完成再关闭弹窗）