reactjs - Ant Design 的 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，它仍然不起作用。

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

Answer 1

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

1. 您需要将 this 绑定(bind)到 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>;