在某些情况下无法关闭反应模态

Question

您好，我想在满足条件时关闭 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,句柄模态函数里面有this.setState({ showModal: !this.state.showModal });

Answer 1

你需要使用你的showModal state，把它放在isOpen道具中

const { showModal } = this.state
<ReactModal
isOpen={showModal}
contentLabel="Minimal Modal Example"
ariaHideApp={false}
>
<button onClick={this.handleModal}>Close Modal</button>
</ReactModal>

Answer 2

你不需要将 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>
)
}