蚂蚁设计的maskClosable模态属性不起作用？

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，它仍然不能工作。

不知道怎么回事？是因为模态被包装在另一个组件中吗？

Answer 1

问题不在于maskClosable，即true。

1. 您需要将this绑定到toggleModal函数。
2. 您设置了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

您需要在onCancel SomeWrapper组件中传递SomeWrapper道具:即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”所做的工作的文档：

“指定用户单击OK按钮时将调用的函数”

并且下意识地填写了“onCancel”作为onOk的对立面所做的事情，尽管实际上列出了以下内容：

“指定当用户单击掩码、关闭右上角按钮或取消按钮时将调用的函数”。

这不仅是因为我自己的粗心，也是因为他们的名字不一致。

onCancel可能应该与API中其他地方的组件命名更一致，比如在名称更恰当的属性'onClose‘中可以找到相同的功能，以减少混淆