有没有一种方法可以在不使用 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。我想知道我们是否可以在不使用 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);
【问题讨论】:
【参考方案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
>
<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?的主要内容,如果未能解决你的问题,请参考以下文章
Rails 5 和设计:如何在不更改默认策略的情况下禁用基于令牌的策略上的会话