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

Question

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()方法不能得到返回值

Answer 1

利用 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'});
        },
      })
    })
  };

Answer 2

以下是在 React 中使用 Antd 的 Modal.confirm 并传递按钮点击结果的示例代码：

import React, { useState } from'react';
import { Modal, Button } from 'antd';

function MyComponent() {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [result, setResult] = useState('');

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setResult('确定按钮被点击');
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setResult('取消按钮被点击');
    setIsModalVisible(false);
  };

  return (
    <div>
      <Button type="primary" onClick={showModal}>
        打开模态框
      </Button>
      <Modal
        title="确认框"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>这是一个确认框</p>
      </Modal>
      <p>点击结果: {result}</p>
    </div>
  );
}

export default MyComponent;

在上述代码中，通过 handleOk 和 handleCancel 函数来处理确定和取消按钮的点击事件，并更新 result 状态来展示点击结果。