React中Antd,Modal.confirm的按钮点击事件如何传递结果?

作者站长头像
站长
· 阅读数 21

react使用antd的Modal.confirm时,怎么在外面获取点击哪个按钮。

import { Modal} from 'antd';

const cmdCan_Click = async () => {
    await requestMsg(1);
};
//iAppMod=0或者iAppMod=1
const requestMsg = async (msgTyp: number) => {
    switch (iAppMod) {
      // 0
      case baseConst.Add:
        switch (msgTyp) {
          case 0:
            await msgDialog('是否确实要注册?');
            break;
        }
        break;
      // 1
      case baseConst.Upd:
        switch (msgTyp) {
          case 0:
            await msgDialog('可以更改吗');
            break;
          case 1:
            await msgDialog('没有修改完成,确定要结束吗?');
            break;
        }
        break;
};
const msgDialog  = async (msg: string) => {
    await Modal.confirm({
      title: "test",
      content: msg,
      closable: true,
      okText: "OK",
      cancelText: "取消",
      centered: true,
      onOk() {
        
      },
      onCancel() {
        
      },
    })
  };

在cmdCan_Click调用requestMsg()方法后,可以获取到msgDialog()对话框里面点击Ok还是Can按钮的值吗?在msgDialog里面renturn好像不行,requestMsg()方法不能得到返回值

回复
1个回答
avatar
test
2024-06-27

利用 promise 封装一下就行了

const cmdCan_Click = async () => {
    const instance = await requestMsg(1);
    //  可拿到弹框实例更新弹框 
    instance?.modal.update({
      title : ''
    })
    //  也可以拿到点击状态
    instance?.status //  'OK' | 'Cancel'

    //  逻辑完成 也可销毁弹框
    instance?.modal.destroy();
};
//iAppMod=0或者iAppMod=1
const requestMsg = async (msgTyp: number) => {
    switch (iAppMod) {
      // 0
      case baseConst.Add:
        switch (msgTyp) {
          case 0:
            return msgDialog('是否确实要注册?');
        }
        break;
      // 1
      case baseConst.Upd:
        switch (msgTyp) {
          case 0:
            return msgDialog('可以更改吗')
          case 1:
            return msgDialog('没有修改完成,确定要结束吗?');
        }
        break;
};
const msgDialog  = async (msg: string) : Promise<{modal : ReturnType<typeof Modal.confirm> , status : 'OK' | 'Cancel'}> => {
    return new Promise((resolve,reject)=>{
      const modal =  Modal.confirm({
        title: "test",
        content: msg,
        closable: true,
        okText: "OK",
        cancelText: "取消",
        centered: true,
        onOk() {
          resolve({modal , status : 'OK'});
        },
        onCancel() {
          resolve({modal , status : 'Cancel'});
        },
      })
    })
  };
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容