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

Posted

技术标签:

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

所以我是 ReactJS 的新手,我正在使用 ANT Design,目前正在玩他们的 Modal。我想知道我们是否可以在不使用 OKCancel 按钮的情况下关闭 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); 

【问题讨论】:

【参考方案1】:

这就是我关闭/显示Modal 的方式。我不使用Okcancel 按钮。如果 prop showFormtrue 则 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
          
        >
            <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()

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

【讨论】:

以上是关于有没有一种方法可以在不使用 ANTD 上的默认按钮的情况下关闭 Modal?的主要内容,如果未能解决你的问题,请参考以下文章

Antd Dropdown设置默认选中

我们一起踩过的坑----react(antd)

模仿 Antd 写一个年份的时间选择器

Rails 5 和设计:如何在不更改默认策略的情况下禁用基于令牌的策略上的会话

有没有一种简单的方法可以在没有图像的情况下为 Kivy 标签、按钮、小部件等添加边框?

使用React与antd新建自定导航栏