时间戳

首页 > 解决方案 > 在 React.js 中选择带有编辑的列表

reactjs - 在 React.js 中选择带有编辑的列表

问题描述

当新用户注册时，我的表单中有一个选择列表，选择列表包含部门。

当用户单击编辑按钮时，选择列表会自动选择在注册时选择的部门。编辑表单还有其他字段会自动填写在文本框中，但选择列表不会自动选择该部门。

这是我尝试过的代码，但这不起作用，唯一的问题是自动选择列表项。

<div className="form-group">
     <label>Department Name </label>
     <select className="form-control" name="empDep" id="empDep" value={this.props.emp_dep }>
          {this.state.depsDropDown.map(dep =>
               <option key={dep.DepartmentID} value={dep.DepartmentID}>{dep.DepartmentName}</option>
           )}
     </select>
</div>

标签： reactjs

解决方案

options标签value应该与select标签相同value。在您的情况下，您将部门名称传递给select标记值，将 id 传递给option标记value。

如果您将option标签更改value为部门名称，那么它应该可以工作，请参阅代码，

<div className="form-group">
     <label>Department Name </label>
     <select className="form-control" name="empDep" id="empDep" value={this.props.emp_dep }>
          {this.state.depsDropDown.map(dep =>
               <option key={dep.DepartmentID} value={dep.DepartmentName}>{dep.DepartmentName}</option>
           )}
     </select>
</div>

注意：这只是一种解决方法，最佳做法是将部门 ID 保存在数据库中。

 getEmpId = (name) => {
    const { depsDropDown } = this.state;
    let id = "";
    for(let i = 0; i< depsDropDown.length; i++) {
      let val = depsDropDown[i]
      if(val.DepartmentName === name){
        id = val.DepartmentID
      }
    }
    return id;
  }

将选择标记更新为

<select className="form-control" name="empDep" id="empDep" value={this.getEmpId(this.props.emp_dep)}>

和选项标记为，

<option key={dep.DepartmentID} value={dep.DepartmentID}>{dep.DepartmentName}</option>

推荐阅读