Question

我有一张表，显示项目列表。当我单击一行以呈现模态时，如何在我的输入字段中填充我单击的数据，然后编辑这些字段，以便可以使用我提供的新数据来更新状态？

这是我与相应文件的代码细分：

Project.js

-javaagent:lombok.jar

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;

EditProjectModal.js

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;

Answer 1

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

   <tbody className="scrollContent">
    {
        projects.map((project, i) => {
            return (
                    <tr key={i}>
                        <td>{project.project_name}</td>
                        <td>{project.description}</td>
                        <td>
                            <EditProjectModal projects={projects} theProject={project} />
                        </td>
                    </tr>
                );
        })
    }
   </tbody>

然后在EditProjectModal中，可以将其设置为如下状态：

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

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

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

Answer 2

可以通过将行详细信息作为道具传递到EditProjectModal来初始化编辑表单，并且可以将道具指定为EditProjectModal的状态以简化处理。然后可以为{{1}赋值}和input使用value属性。可以为value属性指定相应的状态。

textarea

您需要将项目传递为

class EditProjectModal extends Component {  
  constructor(props) {
    super(props);
    this.state = {
      project_name: '',
      description: ''
    }
  }
  ComponentWillMount() {
       this.setState(project_name: this.props.project.project_name,description:this.props.project.description)
 }
render() {
 ....//rest of the code
          <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)}  value={this.state.project_name}/>
              </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)} value={this.state. description}/>
              </div>
            </form>
}

在React中，如何使用自举模态编辑和更新State？

2 个答案: