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)


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

推荐阅读:

CSS3中元素背景的 gradient 渐变属性

阿里巴巴矢量图标库 iconfont 的使用方法

联通沃云服务器拒绝连接请求如何开放端口

SQL语句的基本命令总结

新网站如何做好SEO优化 尽快被收录

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)