纪检网站建设,深圳微交易网站开发,云智网站建设公司,搜索引擎优化英文简称开发中经常需要使用操作提示弹窗#xff0c;在 Antd 中的 Modal 组件提供了 confirm 方法#xff0c;可以快速实现操作提示弹窗。本文就来介绍一下如何使用 Modal.useModal 创建弹窗#xff0c;并且实现手动控制弹窗的关闭逻辑。 一、代码演示
import { message, Modal } f…开发中经常需要使用操作提示弹窗在 Antd 中的 Modal 组件提供了 confirm 方法可以快速实现操作提示弹窗。本文就来介绍一下如何使用 Modal.useModal 创建弹窗并且实现手动控制弹窗的关闭逻辑。 一、代码演示
import { message, Modal } from antd
import { forwardRef, useImperativeHandle } from react
import { delQue } from /api/question.js
import { useQuestionStore, QuestionGetters } from /store/question.jsconst 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 事件: 点击确定回调参数为关闭函数返回 promise 时 resolve 后自动关闭。这个参数很关键我们可以通过这个参数来手动控制弹窗的关闭。
详见 关键步骤 1传出去的 onOk 事件调用 submit 方法传入 data 和 ee 即为关闭函数调用 e 即可关闭弹窗。 关键步骤 2在 submit 方法中根据接口请求结果code0 成功则调用 e 即可关闭弹窗否则不关闭弹窗。 欢迎访问天问博客
