Antd Modal，点击Mask什么都不做答案

【问题标题】：Antd Modal, clicking on Mask to not do anythingAntd Modal，点击Mask什么都不做
【发布时间】：2019-04-08 02:14:50
【问题描述】：

所以默认情况下，Antd Modal 会在用户点击遮罩（Modal 之外的区域）时触发 Modal 的 onCancel 属性。

但我想要的是程序在用户单击掩码时不触发任何内容（只需关闭模式而不更改任何内容），因为我在 onCancel 中有自己的函数。我怎么做到的？提前致谢！

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

很简单，你可以在你的模态框上删除 onCancel 行：D

      <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          //onCancel={this.handleCancel}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
       </Modal>

【讨论】：

【解决方案2】：

将 maskClosable 属性设置为 false。文档页面； https://ant.design/components/modal/

【讨论】：

将 maskClosable 设置为 false 会导致模态框在点击遮罩时无法关闭。我想要做的是通过单击掩码使其可关闭，并执行空白功能，而不触发 onCancel 道具
hmm，如果它满足您的需要，您可以通过将页脚属性设为 null 并放置您自己的取消按钮来禁用默认页脚，您可以在其中提供不同的 onClick 函数，然后是 Modal 的 onCancel 属性。但是关闭图标'x'并点击掩码会触发onCancel函数。

【解决方案3】：

一种选择是使用可用按钮（取消和确定）保持控制，并在使用 maskClosable={false} 单击蒙版时阻止任何操作。

<Modal
      title="Basic Modal"
      visible={this.state.visible}
      onOk={this.handleOk}
      onCancel={this.handleCancel}
      maskClosable={false}
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
</Modal>

现在在模态窗口外点击不会触发任何事情。

【讨论】：