如何在单击编辑按钮时以Reactstrap形式从Ant Design弹出确认模式

Question

我在用reactstrap构建的编辑模式触发确认弹出窗口时遇到问题。当前，当我单击“编辑”按钮并填写编辑表单时，我单击“提交”，并希望看到确认模式。但是，确认模式正在编辑表单的后面呈现。我该如何解决这个问题，以便确认模态不呈现在表单后面？

我想在编辑表单模态之前呈现确认模态，就像双重嵌套模态。

<Media className="align-items-center">
                      <Media>
                        <button  className="btn btn-primary" onClick= {() => this.editClient(post , post.clientId)}><i class="fa fa-edit"></i></button>
                        <Button className="btn btn-danger" onClick= {(event) => this.handleDelete(event, post.clientId)} ><i class="fa fa-trash"></i></Button>                 
                        <Modal isOpen={this.state.modal} toggle={this.handleEdit} className={this.props.className}>
                        <ModalHeader>Edit Client</ModalHeader>
                        <ModalBody>
                        <Form >
                        <FormGroup>              
                            <Label htmlFor="clientId">ID Client</Label>
                            <Input type="text" value={clientId} name="clientId" className="form-control" placeholder="ID Client" onChange={this.handleForm}  disabled />
                         </FormGroup>
                         <FormGroup>
                          <label htmlFor="durasi">Tipe Client</label>
                            <select onChange={this.handleForm} value={clientType} className="form-control"  name = "clientType" required="" >
                                <option value="">Pilihan</option>
                                <option value="BACKEND">BACKEND</option>
                                <option value="CHANNEL">CHANNEL</option>
                            </select>
                        </FormGroup>
                         <FormGroup>
                            <Label htmlFor="name">Nama</Label>
                            <Input onChange={this.handleForm} value={name} type="text"  name = "name" className="form-control" placeholder="Name" required="" />
                         </FormGroup>
                         <FormGroup>
                            <Label htmlFor="url">Url</Label>
                            <Input onChange={this.handleForm} value={url} type="text"  name = "url" className="form-control" placeholder="Url" required="" />
                         </FormGroup>
                         <FormGroup>
                            <Label htmlFor="urlBlacklist">Url Blacklist</Label>

                            {(this.state.post3.map(h => {

                              if ( `${h.clientId}` === `${this.state.formData.clientId}`) {
                                return <Input onChange={this.handleForm} value= {urlBlacklist}  type="text"  name = "urlBlacklist" className="form-control" placeholder="URL Black List" required="" />
                               }} ))}                
                         </FormGroup>

                         <FormGroup>
                          <label>
                            <input type="checkbox" checked= {isChecked} onChange= {this.toggleChange} value="remember-me" /> Anda yakin, Data anda sudah benar ?
                          </label>
                        </FormGroup>

                         <FormGroup>

                         <ButtonAntd type="primary" htmlType="submit" onClick={(event) => this.handleSubmit(event)}>Submit</ButtonAntd>{' '}
                         <ButtonAntd type="danger" htmlType="submit" onClick={this.handleBatal}>Cancel</ButtonAntd>
                         </FormGroup>


                        </Form>
                        </ModalBody>
                        </Modal>

Answer 1

您可以使用window.confirm（“您确定要更新Pocket吗？”]