[英]Unable to close the react-modal on certain condition
Hello i want close Modal when condition has been met (this.chooseRounds > 0 && this.state.rounds == this.state.roundsValue)
, but i can't close this i dont know why.您好,我想在满足条件时关闭 Modal
(this.chooseRounds > 0 && this.state.rounds == this.state.roundsValue)
,但我无法关闭它,我不知道为什么。 I spent more time for resolve this problem, this is a code:我花了更多的时间来解决这个问题,这是一个代码:
let modalShow;
if(this.chooseRounds > 0 && this.state.rounds == this.state.roundsValue) {
modalShow = (
<ReactModal
isOpen={true}
contentLabel="Minimal Modal Example"
ariaHideApp={false}
>
<button onClick={this.handleModal}>Close Modal</button>
</ReactModal>
);
}else {
modalShow = (
<ReactModal
isOpen={false}
contentLabel="Minimal Modal Example"
ariaHideApp={false}
>
<button onClick={this.handleModal}>Close Modal</button>
</ReactModal>
)
}
in state i have showModal: false,
handleModal function inside have this.setState({ showModal: !this.state.showModal });
在状态我有
showModal: false,
handleModal 函数里面有this.setState({ showModal: !this.state.showModal });
You need to use your showModal state and put it in the isOpen props您需要使用您的 showModal 状态并将其放入 isOpen 道具中
const { showModal } = this.state
<ReactModal
isOpen={showModal}
contentLabel="Minimal Modal Example"
ariaHideApp={false}
>
<button onClick={this.handleModal}>Close Modal</button>
</ReactModal>
You don't need to assign the ReactModal to a variable.您不需要将 ReactModal 分配给变量。 Simply using it in the render function like this:
只需在渲染函数中使用它,如下所示:
handleCloseModal() {
this.setState({ showModal: false });
}
handleOpenModal() {
const showModal = this.chooseRounds > 0 && this.state.rounds == this.state.roundsValue
this.setState({showModal})
}
render(){
const {showModal} = this.state
return(
<ReactModal
isOpen={showModal}
contentLabel="Minimal Modal Example"
ariaHideApp={false}
>
<button onClick={this.handleModal}>Close Modal</button>
</ReactModal>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.