У меня проблема с всплывающим окном подтверждения, вызванным модальностью редактирования, созданной с помощью реакционной ленты. В настоящее время, когда я нажимаю кнопку редактирования и заполняю форму редактирования, я нажимаю кнопку отправки и ожидаю увидеть модальное подтверждение. Тем не менее, модальное подтверждение рендеринга за форму редактирования. Как решить эту проблему, чтобы модал подтверждения не отображался за формой?
Я хотел бы визуализировать модал подтверждения перед модалом формы редактирования, как модал с двойным вложением.
<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>