从 if 条件 React 调用模态

Question

我在 React 中有两种模态：

<Modal  isOpen={this.state.activeModal === 'addedToCart'} id="#addedToCart" show={this.state.show} onHide={()=>{this.handleModal()}}>
<Modal.Header closeButton> my heading</Modal.Header>
<Modal.Body> Added Successfully to cart!</Modal.Body>
<Modal.Footer>
<Button onClick={()=>{this.handleModal()}}>Continue Shopping</Button>
<Button onClick={()=>{this.handleGo()}}>See Your Cart</Button>
</Modal.Footer>
</Modal>
<Modal  isOpen={this.state.activeModal === 'selectQuantity'} id="#selectQuantity" show={this.state.showError} onHide={()=>{this.handleModalError()}}>
<Modal.Header closeButton> My heading</Modal.Header>
<Modal.Body> Please choose quantity first!</Modal.Body>
</Modal>

如果数量为空，我试图从这个函数调用不同的模态，那么如果选择了数量，则调用模态选择数量，然后调用第二个模态添加到购物车。

handleSubmit(e,id)
{
e.preventDefault();
if(!this.state.qty) {
$('#selectQuantity').openModal();
}
else {
axios.post('add',{qty:this.state.qty,
id:id})
$('#addedToCart').openModal();
} 
}

有人知道如何做到这一点吗？

Answer 1

我认为：

handleSubmit(e, id) {
...
if(!this.state.qty) {
this.setState({ activeModal: "selectQuantity" })
} else {
...
this.setState({ activeModal: "addedToCart" })
}
}