Javascript 在React中，使用引导模式如何编辑和更新状态？

我有一个表格，显示了一个项目列表。当我单击一行以呈现模式时，如何使用单击的数据预先填充输入字段，然后编辑字段，以便使用我提供的新数据更新状态

下面是我的代码分解和相应的文件：

Project.js

const Project = ({ companies, projects }) => {
    return(
        <div>
            <section id={styles.project} className="divider overlay-light" data-bg-img="http://placehold.it/1920x1280">
                <div className={`container ${styles.wrapper}`}>
                    <div className="row">
                        <div className={`col-md-12 ${styles['proj-header']}`}>
                            <h2 className="title">Projects</h2>
                            <button type="button" className={`btn ${styles['btn-project']}`} data-toggle="modal" data-target="#createProject">Create New Project</button>
                            {
                                companies.map((company, i) => {
                                    return <CreateProjectModal key={i} company={company} />
                                })
                            }
                        </div>
                    </div>
                    <ManageColumns />
                    <div className="row">
                        <div className="col-md-12">
                            <div className={`${styles['table-responsive']} ${styles['dashboard-overview']} tableContainer`}>
                                <table className={`table table-striped scrollTable`}>
                                    <thead className="fixedHeader">
                                        <tr>
                                            <th>Project Name <i className="fas fa-sort-amount-down"></i></th>
                                            <th>Project Description</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody className="scrollContent">
                                        {
                                            projects.map((project, i) => {
                                                return (
                                                        <tr key={i}>
                                                            <td>{project.project_name}</td>
                                                            <td>{project.description}</td>
                                                            <td>
                                                                <EditProjectModal projects={projects} />
                                                            </td>
                                                        </tr>
                                                    );
                                            })
                                        }
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    )
}
export default Project;

class CreateProjectModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      project_name: '',
      description: ''
    }
  }

  onProjectNameChange(event)  {  this.setState({ project_name: event.target.value });  }
  onDescriptionChange(event)  {  this.setState({ description: event.target.value });   }

  handleSubmit(company) {
    fetch(`http://localhost:5000/companys/${company._id['$oid']}/projects`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          project: {
            project_name: this.state.project_name,
            description: this.state.description
          }
        })
      })
      .then(response => response.json())
      .then(data => { return data })
      .catch(err => console.log(err));
  }

    render() {
    const { company } = this.props;
    return(
      <div>
        <div id="createProject" className="modal fade" tabIndex="-1" role="dialog">
          <div className={`modal-dialog modal-lg ${styles['create-proj-modal']}`}>
            <div className="modal-content">
              <div className={`modal-header ${styles['create-proj-modal-header']}`}>
                <button type="button" className={`close ${styles.closeModal}`} data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h3 className="modal-title" id="myModalLabel2">Create New Project</h3>
              </div>
              <div className={`modal-body ${styles['proj-modal-body']}`}>
                <form>
                  <div className={`form-group ${styles.formGroup} ${styles.projName}`}>
                    <label htmlFor="project-name" className="col-form-label">Project Name</label>
                    <input type="text" className="form-control" id="project-name" name="project_name" onChange={(e) => onProjectNameChange(e, this.state)} />
                  </div>
                  <div className={`form-group ${styles.formGroup}`}>
                    <label htmlFor="description" className="col-form-label">Description</label>
                    <textarea className="form-control" id="description" rows="4" name="description" onChange={(e) => onDescriptionChange(e, this.state)} ></textarea>
                  </div>
                </form>
              </div>
              <div className={`modal-footer ${styles.modalFooter}`}>
                <button type="button" className={`btn btn-primary text-white ${styles.saveBtn}`} onClick={() => handleSubmit(company)}>Save Project</button>
                <button type="button" className={`btn btn-default ${styles.cancelBtn}`} data-dismiss="modal">Cancel</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default CreateProjectModal;

class EditProjectModal extends Component {  
  constructor(props) {
    super(props);
    this.state = {
      project_name: '',
      description: ''
    }
  }

  onProjectNameChange(event)  {  this.setState({ project_name: event.target.value });  }
  onDescriptionChange(event)  {  this.setState({ description: event.target.value });   }

  handleSubmit(project) {
    fetch(`http://localhost:5000/projects/${project._id['$oid']}`, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          project: {
            project_name: this.state.project_name,
            description: this.state.description
          }
        })
      })
      .then(response => response.json())
      .then(data => { return data })
      .catch(err => console.log(err));
  }

  render() {
    const { project } = this.props;
    return(
      <div className="btn-group">
        <NavLink type="button" to="#" className={`${styles['pencil-link']}`} data-toggle="modal" data-target="#editProject">
          <i className={`fas fa-pencil-alt ${styles.pencil}`}></i>
        </NavLink>
        <div id="editProject" className="modal fade" tabIndex="-1" role="dialog">
          <div className={`modal-dialog modal-lg ${styles['create-proj-modal']}`}>
            <div className="modal-content">
              <div className={`modal-header ${styles['create-proj-modal-header']}`}>
                <button type="button" className={`close ${styles.closeModal}`} data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h3 className="modal-title" id="myModalLabel2">Edit Project</h3>
              </div>
              <div className={`modal-body ${styles['proj-modal-body']}`}>
                <form>
                  <div className={`form-group ${styles.formGroup} ${styles.projName}`}>
                    <label htmlFor="project-name" className="col-form-label">Project Name</label>
                    <input type="text" className="form-control" id="project-name" name="project_name" onChange={this.onProjectNameChange.bind(this)} />
                  </div>
                  <div className={`form-group ${styles.formGroup}`}>
                    <label htmlFor="description" className="col-form-label">Description</label>
                    <textarea className="form-control" id="description" rows="4" name="description" onChange={this.onDescriptionChange.bind(this)}></textarea>
                  </div>
                </form>
              </div>
              <div className={`modal-footer ${styles.modalFooter} ${styles.editModalFooter}`}>
                <button type="button" className={`btn btn-default ${styles.cancelBtn}`} data-dismiss="modal">Cancel</button>
                <button type="button" className={`btn btn-primary text-white ${styles.saveBtn}`} onClick={(e) => this.handleSubmit(project)}>Save Changes</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default EditProjectModal;

const项目=（{companys，projects}）=>{
返回(
项目
创建新项目
{
companys.map（（company，i）=>{
返回
})
}
项目名称
项目说明
行动
{
projects.map（（project，i）=>{
返回(
{project.project_name}
{project.description}
);
})
}
)
}
导出默认项目；

CreateProjectModal.js

const Project = ({ companies, projects }) => {
    return(
        <div>
            <section id={styles.project} className="divider overlay-light" data-bg-img="http://placehold.it/1920x1280">
                <div className={`container ${styles.wrapper}`}>
                    <div className="row">
                        <div className={`col-md-12 ${styles['proj-header']}`}>
                            <h2 className="title">Projects</h2>
                            <button type="button" className={`btn ${styles['btn-project']}`} data-toggle="modal" data-target="#createProject">Create New Project</button>
                            {
                                companies.map((company, i) => {
                                    return <CreateProjectModal key={i} company={company} />
                                })
                            }
                        </div>
                    </div>
                    <ManageColumns />
                    <div className="row">
                        <div className="col-md-12">
                            <div className={`${styles['table-responsive']} ${styles['dashboard-overview']} tableContainer`}>
                                <table className={`table table-striped scrollTable`}>
                                    <thead className="fixedHeader">
                                        <tr>
                                            <th>Project Name <i className="fas fa-sort-amount-down"></i></th>
                                            <th>Project Description</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody className="scrollContent">
                                        {
                                            projects.map((project, i) => {
                                                return (
                                                        <tr key={i}>
                                                            <td>{project.project_name}</td>
                                                            <td>{project.description}</td>
                                                            <td>
                                                                <EditProjectModal projects={projects} />
                                                            </td>
                                                        </tr>
                                                    );
                                            })
                                        }
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    )
}
export default Project;

class CreateProjectModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      project_name: '',
      description: ''
    }
  }

  onProjectNameChange(event)  {  this.setState({ project_name: event.target.value });  }
  onDescriptionChange(event)  {  this.setState({ description: event.target.value });   }

  handleSubmit(company) {
    fetch(`http://localhost:5000/companys/${company._id['$oid']}/projects`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          project: {
            project_name: this.state.project_name,
            description: this.state.description
          }
        })
      })
      .then(response => response.json())
      .then(data => { return data })
      .catch(err => console.log(err));
  }

    render() {
    const { company } = this.props;
    return(
      <div>
        <div id="createProject" className="modal fade" tabIndex="-1" role="dialog">
          <div className={`modal-dialog modal-lg ${styles['create-proj-modal']}`}>
            <div className="modal-content">
              <div className={`modal-header ${styles['create-proj-modal-header']}`}>
                <button type="button" className={`close ${styles.closeModal}`} data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h3 className="modal-title" id="myModalLabel2">Create New Project</h3>
              </div>
              <div className={`modal-body ${styles['proj-modal-body']}`}>
                <form>
                  <div className={`form-group ${styles.formGroup} ${styles.projName}`}>
                    <label htmlFor="project-name" className="col-form-label">Project Name</label>
                    <input type="text" className="form-control" id="project-name" name="project_name" onChange={(e) => onProjectNameChange(e, this.state)} />
                  </div>
                  <div className={`form-group ${styles.formGroup}`}>
                    <label htmlFor="description" className="col-form-label">Description</label>
                    <textarea className="form-control" id="description" rows="4" name="description" onChange={(e) => onDescriptionChange(e, this.state)} ></textarea>
                  </div>
                </form>
              </div>
              <div className={`modal-footer ${styles.modalFooter}`}>
                <button type="button" className={`btn btn-primary text-white ${styles.saveBtn}`} onClick={() => handleSubmit(company)}>Save Project</button>
                <button type="button" className={`btn btn-default ${styles.cancelBtn}`} data-dismiss="modal">Cancel</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default CreateProjectModal;

class EditProjectModal extends Component {  
  constructor(props) {
    super(props);
    this.state = {
      project_name: '',
      description: ''
    }
  }

  onProjectNameChange(event)  {  this.setState({ project_name: event.target.value });  }
  onDescriptionChange(event)  {  this.setState({ description: event.target.value });   }

  handleSubmit(project) {
    fetch(`http://localhost:5000/projects/${project._id['$oid']}`, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          project: {
            project_name: this.state.project_name,
            description: this.state.description
          }
        })
      })
      .then(response => response.json())
      .then(data => { return data })
      .catch(err => console.log(err));
  }

  render() {
    const { project } = this.props;
    return(
      <div className="btn-group">
        <NavLink type="button" to="#" className={`${styles['pencil-link']}`} data-toggle="modal" data-target="#editProject">
          <i className={`fas fa-pencil-alt ${styles.pencil}`}></i>
        </NavLink>
        <div id="editProject" className="modal fade" tabIndex="-1" role="dialog">
          <div className={`modal-dialog modal-lg ${styles['create-proj-modal']}`}>
            <div className="modal-content">
              <div className={`modal-header ${styles['create-proj-modal-header']}`}>
                <button type="button" className={`close ${styles.closeModal}`} data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h3 className="modal-title" id="myModalLabel2">Edit Project</h3>
              </div>
              <div className={`modal-body ${styles['proj-modal-body']}`}>
                <form>
                  <div className={`form-group ${styles.formGroup} ${styles.projName}`}>
                    <label htmlFor="project-name" className="col-form-label">Project Name</label>
                    <input type="text" className="form-control" id="project-name" name="project_name" onChange={this.onProjectNameChange.bind(this)} />
                  </div>
                  <div className={`form-group ${styles.formGroup}`}>
                    <label htmlFor="description" className="col-form-label">Description</label>
                    <textarea className="form-control" id="description" rows="4" name="description" onChange={this.onDescriptionChange.bind(this)}></textarea>
                  </div>
                </form>
              </div>
              <div className={`modal-footer ${styles.modalFooter} ${styles.editModalFooter}`}>
                <button type="button" className={`btn btn-default ${styles.cancelBtn}`} data-dismiss="modal">Cancel</button>
                <button type="button" className={`btn btn-primary text-white ${styles.saveBtn}`} onClick={(e) => this.handleSubmit(project)}>Save Changes</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default EditProjectModal;

类CreateProjectModal扩展组件{
建造师（道具）{
超级（道具）；
此.state={
项目名称：“”，
说明：“”
}
}
onProjectNameChange（事件）{this.setState（{project_name:event.target.value}）；}
onDescriptionChange（事件）{this.setState（{description:event.target.value}）；}
handleSubmit（公司）{
取回(`http://localhost:5000/companys/${company.\u id['$oid']}/projects`{
方法：“POST”，
标题：{'Content-Type'：'application/json'}，
正文：JSON.stringify({
项目：{
项目名称：this.state.project\u name，
description:this.state.description
}
})
})
.then（response=>response.json（））
.then（数据=>{return data}）
.catch（err=>console.log（err））；
}
render（）{
const{company}=this.props；
返回(
&时代；
创建新项目
项目名称
onProjectNameChange（e，this.state）}/>
描述
onDescriptionChange（e，this.state）}>
handleSubmit（公司）}>保存项目
取消
)
}
}
导出默认CreateProjectModal；

EditProjectModal.js

const Project = ({ companies, projects }) => {
    return(
        <div>
            <section id={styles.project} className="divider overlay-light" data-bg-img="http://placehold.it/1920x1280">
                <div className={`container ${styles.wrapper}`}>
                    <div className="row">
                        <div className={`col-md-12 ${styles['proj-header']}`}>
                            <h2 className="title">Projects</h2>
                            <button type="button" className={`btn ${styles['btn-project']}`} data-toggle="modal" data-target="#createProject">Create New Project</button>
                            {
                                companies.map((company, i) => {
                                    return <CreateProjectModal key={i} company={company} />
                                })
                            }
                        </div>
                    </div>
                    <ManageColumns />
                    <div className="row">
                        <div className="col-md-12">
                            <div className={`${styles['table-responsive']} ${styles['dashboard-overview']} tableContainer`}>
                                <table className={`table table-striped scrollTable`}>
                                    <thead className="fixedHeader">
                                        <tr>
                                            <th>Project Name <i className="fas fa-sort-amount-down"></i></th>
                                            <th>Project Description</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody className="scrollContent">
                                        {
                                            projects.map((project, i) => {
                                                return (
                                                        <tr key={i}>
                                                            <td>{project.project_name}</td>
                                                            <td>{project.description}</td>
                                                            <td>
                                                                <EditProjectModal projects={projects} />
                                                            </td>
                                                        </tr>
                                                    );
                                            })
                                        }
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    )
}
export default Project;

class CreateProjectModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      project_name: '',
      description: ''
    }
  }

  onProjectNameChange(event)  {  this.setState({ project_name: event.target.value });  }
  onDescriptionChange(event)  {  this.setState({ description: event.target.value });   }

  handleSubmit(company) {
    fetch(`http://localhost:5000/companys/${company._id['$oid']}/projects`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          project: {
            project_name: this.state.project_name,
            description: this.state.description
          }
        })
      })
      .then(response => response.json())
      .then(data => { return data })
      .catch(err => console.log(err));
  }

    render() {
    const { company } = this.props;
    return(
      <div>
        <div id="createProject" className="modal fade" tabIndex="-1" role="dialog">
          <div className={`modal-dialog modal-lg ${styles['create-proj-modal']}`}>
            <div className="modal-content">
              <div className={`modal-header ${styles['create-proj-modal-header']}`}>
                <button type="button" className={`close ${styles.closeModal}`} data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h3 className="modal-title" id="myModalLabel2">Create New Project</h3>
              </div>
              <div className={`modal-body ${styles['proj-modal-body']}`}>
                <form>
                  <div className={`form-group ${styles.formGroup} ${styles.projName}`}>
                    <label htmlFor="project-name" className="col-form-label">Project Name</label>
                    <input type="text" className="form-control" id="project-name" name="project_name" onChange={(e) => onProjectNameChange(e, this.state)} />
                  </div>
                  <div className={`form-group ${styles.formGroup}`}>
                    <label htmlFor="description" className="col-form-label">Description</label>
                    <textarea className="form-control" id="description" rows="4" name="description" onChange={(e) => onDescriptionChange(e, this.state)} ></textarea>
                  </div>
                </form>
              </div>
              <div className={`modal-footer ${styles.modalFooter}`}>
                <button type="button" className={`btn btn-primary text-white ${styles.saveBtn}`} onClick={() => handleSubmit(company)}>Save Project</button>
                <button type="button" className={`btn btn-default ${styles.cancelBtn}`} data-dismiss="modal">Cancel</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default CreateProjectModal;

class EditProjectModal extends Component {  
  constructor(props) {
    super(props);
    this.state = {
      project_name: '',
      description: ''
    }
  }

  onProjectNameChange(event)  {  this.setState({ project_name: event.target.value });  }
  onDescriptionChange(event)  {  this.setState({ description: event.target.value });   }

  handleSubmit(project) {
    fetch(`http://localhost:5000/projects/${project._id['$oid']}`, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          project: {
            project_name: this.state.project_name,
            description: this.state.description
          }
        })
      })
      .then(response => response.json())
      .then(data => { return data })
      .catch(err => console.log(err));
  }

  render() {
    const { project } = this.props;
    return(
      <div className="btn-group">
        <NavLink type="button" to="#" className={`${styles['pencil-link']}`} data-toggle="modal" data-target="#editProject">
          <i className={`fas fa-pencil-alt ${styles.pencil}`}></i>
        </NavLink>
        <div id="editProject" className="modal fade" tabIndex="-1" role="dialog">
          <div className={`modal-dialog modal-lg ${styles['create-proj-modal']}`}>
            <div className="modal-content">
              <div className={`modal-header ${styles['create-proj-modal-header']}`}>
                <button type="button" className={`close ${styles.closeModal}`} data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h3 className="modal-title" id="myModalLabel2">Edit Project</h3>
              </div>
              <div className={`modal-body ${styles['proj-modal-body']}`}>
                <form>
                  <div className={`form-group ${styles.formGroup} ${styles.projName}`}>
                    <label htmlFor="project-name" className="col-form-label">Project Name</label>
                    <input type="text" className="form-control" id="project-name" name="project_name" onChange={this.onProjectNameChange.bind(this)} />
                  </div>
                  <div className={`form-group ${styles.formGroup}`}>
                    <label htmlFor="description" className="col-form-label">Description</label>
                    <textarea className="form-control" id="description" rows="4" name="description" onChange={this.onDescriptionChange.bind(this)}></textarea>
                  </div>
                </form>
              </div>
              <div className={`modal-footer ${styles.modalFooter} ${styles.editModalFooter}`}>
                <button type="button" className={`btn btn-default ${styles.cancelBtn}`} data-dismiss="modal">Cancel</button>
                <button type="button" className={`btn btn-primary text-white ${styles.saveBtn}`} onClick={(e) => this.handleSubmit(project)}>Save Changes</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default EditProjectModal;

类EditProjectModal扩展组件{ 建造师（道具）{ 超级（道具）； 此.state={ 项目名称：“”， 说明：“” } } onProjectNameChange（事件）{this.setState（{project_name:event.target.value}）；} onDescriptionChange（事件）{this.setState（{description:event.target.value}）；} handleSubmit（项目）{ 取回(`http://localhost:5000/projects/${project.\u id['$oid']}`{ 方法：'放'， 标题：{'Content-Type'：'application/json'}， 正文：JSON.stringify({ 项目：{ 项目名称：this.state.project\u name， description:this.state.description } }) }) .then（response=>response.json（）） .then（数据=>{return data}） .catch（err=>console.log（err））； } render（）{ const{project}=this.props； 返回( &时代； 编辑项目 项目名称 描述 取消 this.handleSubmit（project）}>保存更改 ) } } 导出默认editprojectmodel；

---

首先，在填充项目表（我将其命名为项目）时，需要将当前行项目详细信息作为道具传递给EditProjectModal：

然后，您需要在EditProjectModal中设置输入值，其状态如下：

constructor(props) {
    super(props);
    this.state = {
      project_name: this.props.theProject.project_name,
      description: this.props.theProject.description
    }
  }
}

<form>
    <div className={`form-group ${styles.formGroup} ${styles.projName}`}>
        <label htmlFor="project-name" className="col-form-label">Project Name</label>
        <input type="text" className="form-control" id="project-name" 
               name="project_name" 
               value={this.state.project_name}
               onChange={this.onProjectNameChange.bind(this)} />
    </div>
    <div className={`form-group ${styles.formGroup}`}>
        <label htmlFor="description" className="col-form-label">Description</label>
        <textarea className="form-control" id="description" 
                  rows="4" name="description" 
                  value={this.state.description}
                  onChange={this.onDescriptionChange.bind(this)}></textarea>
    </div>
</form>

项目名称
描述

编辑表单可以通过将行详细信息作为道具传递给

EditProjectModal

来初始化，道具可以作为