我如何将setState中的数据传递给模式REACTJS

Question

如何将我的表数据传递给我的模态，我正在执行编辑功能

<button className="btn btn-info btn-icon btn-circle btn-md m-r-2 float-right" onClick={() => 
    {this.setState({state:tabledata },
    this.toggleModal("modalWithoutAnimation")
    );}}><i className="fa fa-edit"></i>
</button>

这是我的模态

this.toggleModal（“ modalWithoutAnimation”）}>this.toggleModal（“ modalWithoutAnimation”）}>编辑部

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

Answer 1

仅在单击时启用模型弹出窗口，将数据保存到状态并像这样传递给模型弹出窗口-

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