Ant Design Modal.confirm使用onCancel方法无法关闭弹窗问题解决

同事在开发中遇到一个问题，使用 Ant Design Modal 的确认对话框，正常使用没有问题：

Modal.confirm({
  content: 'w3h5.com',
  onOk() {
    console.log('OK');
  },
  onCancel() {
    console.log('Cancel');
  },
});

使用 onCancel 方法的参数就不能关闭弹窗了：

Modal.confirm({
  content: 'w3h5.com',
  onOk() {
    console.log('OK');
  },
  onCancel(a) {
    console.log(a);
  },
});

最后在 GitHub 上面找到了解决方法：Modal.confirm在设置closable为true的情况下，onCancel传入的close函数参数为undefined #36581

当我们使用 Modal.method() 或 Modal.useModal() 打开弹窗时。

关闭弹窗有 3 种方式

点击蒙层关闭 [maskClosable=true]

ESC 关闭 [keyboard=true]

点击右上角图标关闭 [closable=true]

如果是 confirm 类型，footer 会多出一个取消按钮 (确定按钮等左边)，此时关闭弹窗在前面 3 种方式中又多出一种，点击 取消 按钮关闭。

但是官方源码对于 前面 3 种关闭形式定义为 triggerCancel, 这时候不能通过 onCancel: function(close) 的第一个参数 close 去调用。

对于 confirm 类型弹窗，点击 取消 按钮这个行为才需要通过 close 方法手动关闭。

我 GET 到的官方设计目的是，前 3 种方式关闭，属于 antd 功能。不需要开发者手动 close, onCancel 则表示 点击遮罩层或右上角叉或ESC关闭的回调。

而 confirm 类型弹窗的 取消 按钮行为是开发需要关心的逻辑。所以交给开发者去手动 close。 前 3 种的 onCancel 还是正常执行。

对此我解决方法是多加一个判断(需要先修复 undefined问题)，或者具体等官方具体解答一下设计场景。

const config = {
  title: 'issues/36581',
  closable: true,
  content: <code>Test</code>,
  onCancel(close) {
    if(close && close.triggerCancel) {
      // 前面 3 种关闭类型；点击遮罩层、右上角叉、ESC关闭 的回调
      return;
    }
    // do something
    close()
  },
};

Modal.method(config)

或者 Modal.useModal() 用法 

// ...
const [modal, contextHolder] = Modal.useModal();
modal.method(config)
//..

另外一个粗暴的解决方案

const config = {
  title: 'issues/36581',
  closable: true,
  content: <code>Test</code>,
  onCancel(close) {
    lodash.isFunction(close) && close()
  },
};
Modal.method(config)

未经允许不得转载：前端资源网 - w3h5 » Ant Design Modal.confirm使用onCancel方法无法关闭弹窗问题解决