[英]How can i pass the data inside setState to modal REACTJS
我如何将我的表格数据传递给我的模态,我正在执行编辑功能
<button className="btn btn-info btn-icon btn-circle btn-md m-r-2 float-right" onClick={() =>
this.toggleModal("modalWithoutAnimation", tabledata)
);}}><i className="fa fa-edit"></i>
</button>
这是我的模态,我添加了 this.state.modalWithoutAnimation
{this.state.modalWithoutAnimation && <Modal isOpen={this.state.modalWithoutAnimation} fade={false} toggle={() => this.toggleModal("modalWithoutAnimation")}>
<ModalHeader toggle={() => this.toggleModal("modalWithoutAnimation")}>
Edit Department
</ModalHeader>
<form className="margin-bottom-0" onSubmit={this.handleEdit}>
<ModalBody>
<h3><label className="control-label">Module Information </label></h3>
<div className="row row-space-10">
<div className="col-md-4 m-b-15">
<label className="control-label">Module Name <span className="text-danger">*</span></label>
<input type="text" className="form-control" placeholder="Module Name" name="moduleName" value={this.state.moduleName} onChange={this.handleChange} required="" />
</div>
<div className="col-md-4 m-b-15">
<label className="control-label">Course <span className="text-danger">*</span></label>
<input type="text" className="form-control" placeholder="Course" name="courseId" defaultValue={localcourseid} onChange={this.handleChange} required="" />
</div>
<div className="col-md-4 m-b-15">
<label className="control-label">Sequence Number <span className="text-danger">*</span></label>
<input type="text" className="form-control" placeholder="Sequence Number" name="sequenceNo" value={this.state.sequenceNo} onChange={this.handleChange} required="" />
</div>
</div>
</ModalBody>
<ModalFooter>
<button onClick={(e) => {
this.handleEdit(e, this.state.id)
console.log(this.state.id)
this.addNotification('success', 'Success', 'All data has been successfully saved', 'bottom-right')
this.toggleModal("modalWithoutAnimation")
}} className="btn btn-sm btn-success">Save Edit</button>
<button
className="btn btn-white btn-sm"
onClick={() => this.toggleModal("modalWithoutAnimation")} >
Close
</button>
</ModalFooter>
</form>
</Modal>
}
这里的状态与功能 togglemodal 似乎无法显示 this.state.moduleName 等。我完全丢失了但在我的控制台日志中我可以显示单击数据的状态
this.state = {
error: null,
isLoaded: false,
modalDialog: false,
modalWithoutAnimation: false,
modalMessage: false,
modalAlert: false,
id:'',
moduleName:'',
courseId:'',
sequenceNo:'',
}
//binded elements
this.toggleCollapse = this.toggleCollapse.bind(this);
this.toggleModal = this.toggleModal.bind(this);
this.toggleSweetAlert = this.toggleSweetAlert.bind(this);
this.addNotification = this.addNotification.bind(this);
this.notificationDOMRef = React.createRef();
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleEdit = this.handleEdit.bind(this);
this.handleEditChange = this.handleEditChange.bind(this);
this.handleDelete = this.handleDelete.bind(this);
this.handletoggleClose = this.handletoggleClose.bind(this);
}
//event for toggling modal
toggleModal(name, tabledatas) {
switch (name) {
case 'modalDialog':
this.setState({ modalDialog: !this.state.modalDialog });
break;
case 'modalWithoutAnimation':
this.setState({ modalWithoutAnimation: !this.state.modalWithoutAnimation,
state:tabledatas
});
break;
case 'modalMessage':
this.setState({ modalMessage: !this.state.modalMessage });
break;
case 'modalAlert':
this.setState({ modalAlert: !this.state.modalAlert });
break;
default:
break;
}
}
仅在单击时启用模型弹出窗口,将数据保存到状态并像这样传递到模型弹出窗口 -
<button className="btn btn-info btn-icon btn-circle btn-md m-r-2 float-right"
onClick={()=>this.handleToggle(tabledata)}><i className="fa fa-edit"></i>
</button>
函数handleToggle
handleToggle=data=>{
this.setState({state:data, toggle:true })
}
jsx
{this.state.toggle && <Modal>
<h3><label className="control-label">Module Information </label></h3>
<div className="row row-space-10">
<div className="col-md-4 m-b-15">
<label className="control-label">Module Name <span className="text-danger">*</span></label>
<input type="text" className="form-control" placeholder="Module Name" name="moduleName" value={this.state.moduleName} onChange={this.handleChange} required="" />
</div>
<div className="col-md-4 m-b-15">
<label className="control-label">Course <span className="text-danger">*</span></label>
<input type="text" className="form-control" placeholder="Course" name="courseId" defaultValue={localcourseid} onChange={this.handleChange} required="" />
</div>
<div className="col-md-4 m-b-15">
<label className="control-label">Sequence Number <span className="text-danger">*</span></label>
<input type="text" className="form-control" placeholder="Sequence Number" name="sequenceNo" value={this.state.sequenceNo} onChange={this.handleChange} required="" />
</div>
</div>
</ModalBody>
<ModalFooter>
<button onClick={(e) => {
this.handleEdit(e, this.state.id)
console.log(this.state.id)
this.addNotification('success', 'Success', 'All data has been successfully saved', 'bottom-right')
this.toggleModal("modalWithoutAnimation")
}} className="btn btn-sm btn-success">Save Edit</button>
<button
className="btn btn-white btn-sm"
onClick={() => this.toggleModal("modalWithoutAnimation")} >
Close
</button>
</ModalFooter>
</form>
</Modal>}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.