从 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>

如果数量为空，我试图从此函数调用不同的模态，然后调用模态 selectQuantity，如果选择了数量，则调用第二个模态 addedToCart。

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" })
   }
}

从 if 条件 React 调用模态

Calling modal from if condition React

bootstrap-modal

reactjs