[英]Unable to close the react-modal on certain condition
您好,我想在滿足條件時關閉 Modal (this.chooseRounds > 0 && this.state.rounds == this.state.roundsValue)
,但我無法關閉它,我不知道為什么。 我花了更多的時間來解決這個問題,這是一個代碼:
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>
)
}
在狀態我有showModal: false,
handleModal 函數里面有this.setState({ showModal: !this.state.showModal });
您需要使用您的 showModal 狀態並將其放入 isOpen 道具中
const { showModal } = this.state
<ReactModal
isOpen={showModal}
contentLabel="Minimal Modal Example"
ariaHideApp={false}
>
<button onClick={this.handleModal}>Close Modal</button>
</ReactModal>
您不需要將 ReactModal 分配給變量。 只需在渲染函數中使用它,如下所示:
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.