ReactJS单页面如何使用一个handleChange控制多个select下拉表单

你遇到的选中值被覆盖问题，核心原因是当前的handleChange方法永远只会更新state中的value字段，所有select的修改都落到了同一个state变量上；同时你对select的属性使用有误，没有通过name区分不同下拉框，也没有正确绑定value属性。

1. 先清理现有明显错误 #

• 删除state中重复声明的gpNummer字段
• 去掉所有input标签name属性值末尾的多余空格，避免匹配不到state字段

2. 改造select相关逻辑 #

你已经封装了通过name属性动态更新state的updateField方法，直接复用这个方法即可，不需要单独维护handleChange，也不用拆分多个处理函数：

给每个select添加name属性、正确绑定value #

三个select分别对应state的manager、creative、formatType三个字段，修改后的代码如下：

{/* 经理下拉框 */}
<label> Manager </label>
<select 
  name="manager" 
  value={this.state.manager} 
  onChange={this.updateField}
>
  <option value="Katja">Katja</option>
  <option value="Seba">Seba</option>
  <option value="aylina">aylina</option>
  <option value="Christina">Christina</option>
</select>

{/* 格式类型下拉框 */}
<label> Formattyp </label>
<select 
  name="creative" 
  value={this.state.creative} 
  onChange={this.updateField}
>
  <option value="MR">MR</option>
  <option value="premiumAdbundle">premiumAdbundle</option>
  <option value="adBundle">AdBundle</option>
  <option value="fireplace">Fireplace</option>
</select>

{/* 创意类型下拉框 */}
<label> Creative </label>
<select 
  name="formatType" 
  value={this.state.formatType} 
  onChange={this.updateField}
>
  <option value="native">native</option>
  <option value="display">display</option>
  <option value="advertorial">advertorial</option>
  <option value="mobile">mobile</option>
</select>

可选优化：删除无用的handleChange方法 #

现在所有表单元素（input+select）都统一使用updateField处理值更新，原本的handleChange已经没有用处，可以直接删除，减少冗余代码。

修改完成后所有下拉框的值会分别存储到对应的state字段中，不会出现互相覆盖的问题，也不需要引入第三方依赖。

内容的提问来源于stack exchange，提问作者p-heim