Ant Design mask Closable modal 属性不起作用？

Question

我在另一个组件中使用 ANT Design 的模态，如下所示：

import React from "react";
import {
  Modal,
  Button
} from "antd";

class SomeModalWrapper extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  handleOk() {
    console.log("OK");
  }

  render() {
    const { modalVisible, toggleModal } = this.props;

    return (
      <Modal
        title="Some Title"
        visible={modalVisible}
        width={300}
        className=""
        destroyOnClose={true}
        footer={[
          <Button key="back" onClick={() => toggleModal()}>
            Return
          </Button>,
          <Button key="submit" type="primary" onClick={this.handleOk}>
            Submit
          </Button>
        ]}
      >
        // some other content
      </Modal>
    );
  }
}

export default SomeModalWrapper;

该组件依次被父组件调用，如下所示：

import React from "react";

class SomeComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = { 
        modalVisible: false
    };
  }

  toggleModal() {
    const { modalVisible } = this.state;
    this.setState({ modalVisible: !modalVisible });
  }

  render() {
    const { modalVisible } = this.state;

    return (
      <div>
       // some non-modal content     

       <button onClick={() => this.toggleModal()}>Toggle Modal</button>

        <SomeModalWrapper
            modalVisible={modalVisible}
            toggleModal={this.toggleModal}
        />
      </div>
    );
  }
}

export default SomeComponent;

所有按钮工作正常（显示和隐藏）。但是，当我单击模态框外的区域时，由于 maskClosable 属性默认设置为 true，模态框应自动关闭。即使我专门将它放在模态中作为 maskClosable: true，它仍然不起作用。

不确定发生了什么？是不是因为modal被另外一个组件包裹了？

Answer 1

问题不在于 maskClosable，即 default value is true。

您需要将 this 绑定到 toggleModal 函数。
你设置visible={modalVisible}，这意味着你控制模态，有了它，modalVisible状态将覆盖 maskClosable。也就是说，maskClosable不能自己改变状态。

class SomeComponent extends React.Component {
  state = {
    modalVisible: false
  };

  // bind with named class function or with `.bind()` inside consturctor
  toggleModal = () => {
    this.setState(prevState => ({ modalVisible: !prevState.modalVisible }));
  };

  render() {
    ...
  }
}

此外，我建议总是使用onCancel，没有它你会得到意想不到的行为。

<Modal
  ...
  onCancel={toggleModal}
  ...
>
  // some other content
</Modal>;

Answer 2

您需要在 SomeWrapper 组件中传递 onCancel 道具：即 Somewrapper.js

<Modal
        title="Some Title"
        visible={modalVisible}
        width={300}
        className=""
        onCancel={toggleModal} //pass close logic here
        destroyOnClose={true}
        footer={[
          <Button key="back" onClick={() => toggleModal()}>
            Return
          </Button>,
          <Button key="submit" type="primary" onClick={this.handleOk}>
            Submit
          </Button>
        ]}
      >
        // some other content
      </Modal>

这是演示：https://codesandbox.io/s/long-shape-7tc3g

Answer 3

为任何犯过我错误的人添加这个：

我阅读了文档，了解 'onOk' 的作用是：

'Specify a function that will be called when a user clicks the OK button'

并下意识地填写了 'onCancel' 与 onOk 相反的内容，尽管实际列出的是：

'指定当用户单击蒙版、右上角的关闭按钮或取消按钮时将调用的函数'。

不仅是我自己的粗心，还因为他们Api中的命名不一致。

onCancel 可能应该与 API 中其他地方的组件的命名更加一致，例如 'Drawer'，在更恰当地命名的属性 [=33= 中可以找到相同的功能], 以减少混淆

Ant Design mask Closable modal 属性不起作用？

Ant Design's maskClosable modal property is not working?

modal-dialog

reactjs

antd

Ant Design mask Closable modal 属性 不起作用？

Ant Design's maskClosable modal property is not working?

modal-dialog

reactjs

antd

Ant Design mask Closable modal 属性不起作用？