Ant Design 3x Modal Confirm：区分关闭(X)与取消按钮返回不同Promise值

在Ant Design 3.x的confirm组件中，onCancel回调会接收事件对象，我们可以通过事件对象的目标元素区分点击的是「No」按钮还是右上角的关闭图标（X），从而实现不同的Promise返回值。

修改后的代码如下：

Confirmation = async () => {
  return new Promise((resolve, reject) => {
    confirm({
      title: `Message`,
      okText: 'Yes',
      cancelText: 'No',
      onOk: () => {
        resolve(1);
      },
      onCancel: (e) => {
        // 区分点击来源：关闭图标或取消按钮
        if (e.target.classList.contains('ant-modal-close')) {
          // 点击右上角X关闭弹窗，resolve为2
          resolve(2);
        } else {
          // 点击No按钮，resolve为0
          resolve(0);
        }
      },
    });
  });
};

逻辑说明 #

• 点击「Yes」按钮：触发onOk回调，Promise resolve为1；
• 点击「No」按钮：触发onCancel，事件目标为取消按钮，resolve为0；
• 点击右上角「X」：事件目标为带有ant-modal-close类名的关闭图标元素，resolve为2。

如果担心类名稳定性，也可以通过元素结构辅助判断（比如关闭图标按钮内包含ant-modal-close-x子元素），但直接使用ant-modal-close类名是最直接的方式。

内容的提问来源于stack exchange，提问作者Ramkumar G