Javascript 有没有一种方法可以在不使用ANTD上的默认按钮的情况下关闭Modal?
所以我是ReactJS新手,我正在使用ANT设计,目前正在使用他们的模式。我想知道我们是否可以在不使用OK和Cancel按钮的情况下关闭模式 所以我取下了这些按钮。并在配置中创建了一个按钮。我想用那个按钮关闭模态。任何帮助都会很好!提前谢谢 这是我的密码Javascript 有没有一种方法可以在不使用ANTD上的默认按钮的情况下关闭Modal?,javascript,reactjs,antd,ant-design-pro,Javascript,Reactjs,Antd,Ant Design Pro,所以我是ReactJS新手,我正在使用ANT设计,目前正在使用他们的模式。我想知道我们是否可以在不使用OK和Cancel按钮的情况下关闭模式 所以我取下了这些按钮。并在配置中创建了一个按钮。我想用那个按钮关闭模态。任何帮助都会很好!提前谢谢 这是我的密码 const { Modal, Button } = antd; const ReachableContext = React.createContext(); const UnreachableContext = React.create
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);
const{Modal,Button}=antd;
const ReachableContext=React.createContext();
const UnreachableContext=React.createContext();
常量把手按钮图标=()=>{
log('单击此按钮');
}
常量配置={
可见:假,
标题:“使用钩子!”,图标:null,
okButtonProps:{style:{display:'none'}},
//cancelButtonProps:{style:{display:'none'}},
内容:(
{sample=>(
点击我按钮
//是否有使用此按钮关闭模式的功能?
)}
),
};
常量应用=()=>{
const[modal,contextHolder]=modal.useModal();
返回(
{
modal.confirm(配置);
}}
>
证实
{contextHolder}
);
};
render(,mountNode);
我就是这样关闭/显示的。我不使用Ok
或cancel
按钮。如果道具showForm
为true
,则模态将显示,否则不会显示
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);
<Button
type='primary'
block
onClick={()=>this.setState({showForm: false})} //here make showForm to false to close the modal
>
Close the Modal
</Button>