有没有一种方法可以在不使用 ANTD 上的默认按钮的情况下关闭 Modal？答案

【问题标题】：Is there a way I can close Modal without using the default Buttons on ANTD?有没有一种方法可以在不使用 ANTD 上的默认按钮的情况下关闭 Modal？
【发布时间】：2020-06-20 21:07:39
【问题描述】：

所以我是 ReactJS 的新手，我正在使用 ANT Design，目前正在玩他们的 Modal。我想知道我们是否可以在不使用 OK 和 Cancel 按钮的情况下关闭 Modal。

所以我删除了这些按钮。并在配置中创建了一个 Button。我想使用该按钮关闭模态。任何帮助都会很棒！提前致谢！

这是我的代码。

const {  Modal, Button  } = antd;

const ReachableContext = React.createContext();
const UnreachableContext = React.createContext();

const handleButtonOnClick = () => {
  console.log('this button was clicked');
}

const config = {
  visible: false,
  title: 'Use Hook!', icon: null,
  okButtonProps: { style: { display: 'none' } },
  // cancelButtonProps: { style: { display: 'none' } },
  content: (
    <div>
      <ReachableContext.Consumer>
        {sample => (
          <Button
            type='primary'
            block
          >
            Click Me Button
            // IS THERE A FUNCTION THAT I CAN CLOSE THE MODAL USING THIS BUTTON?
          </Button>
         )}
      </ReachableContext.Consumer>
    </div>
  ),
};

const App = () => {
  const [modal, contextHolder] = Modal.useModal();
  return (
    <ReachableContext.Provider value={modal}>
      <Button
        onClick={() => {
          modal.confirm(config);
        }}
      >
        Confirm
      </Button>
      {contextHolder} 
    </ReachableContext.Provider>
  );
};

ReactDOM.render(<App />, mountNode);

【问题讨论】：

标签： javascript reactjs antd ant-design-pro

【解决方案1】：

这就是我关闭/显示Modal 的方式。我不使用Ok 或cancel 按钮。如果 prop showForm 是 true 则 Modal 将显示，否则不会显示。

import React, { Component } from "react";
import { connect } from "react-redux";
import * as actions from "../../actions";

import { Modal, Icon } from "antd";

class FormContainerModal extends Component {
  state = {};

  render() {
    const { showForm } = this.props;
    return (
      <>
        <Modal
          title={
            <div>
              Title
            </div>
          }
          destroyOnClose={true}
          footer={null}
          centered
          maskClosable={false}
          onCancel={this.props.closeModal}
          visible={showForm} //it will close the modal if showForm is false
          width="950px"
        >
            <div>
              My Content
            </div>
        </Modal>
      </>
    );
  }
}

const mapStateToProps = state => {
  return {
    showForm: state.form.showForm
  };
};

export default connect(mapStateToProps, actions)(FormContainerModal);

在您的情况下，您可以在单击按钮时更改 showForm 的布尔值。

           <Button
            type='primary'
            block
           onClick={()=>this.setState({showForm: false})} //here make showForm to false to close the modal
          >
            Close the Modal
          </Button>

【讨论】：

【解决方案2】：

您可以使用模态内容中的按钮触发模态的销毁，如下所示：

const modal = Modal.info();

const closeModal = () => modal.destroy();

modal.update({
  title: 'Updated title',
  content: (
    <Button onClick={closeModal}>Destroy</Button>
  ),
});

【讨论】：

【解决方案3】：

如果你知道你只打开了一个模态（或者不介意关闭任何其他打开的模态），你可以调用类方法

Modal.destroyAll()

从任何地方，它都会成功。

【讨论】：