Reactjs 同一页面上的多个react下拉列表为每个下拉列表获取相同的值

我有一个ReactJS组件，我正在使用Redux表单，我正在构建一个向导。我有一些动态下拉列表 在步骤中创建，输出如下所示：

<select name="year[0]" class="form-control">
  <option value="">Please select</option>
  <option value="1980">1980</option>
  <option value="1981">1981</option>
  <option value="1982">1982</option>
</select>

<select name="year[1]" class="form-control">
  <option value="">Please select</option>
  <option value="1980">1980</option>
  <option value="1981">1981</option>
  <option value="1982">1982</option>
</select>

_.times(2, (i) => (
  <div className="col-md-4">
    <Field 
      name={'year['+i+']'} 
      component={yearDropdown} 
      arr={_.values(years)} // years looks like so: years: {'1980': 1980, '1981': 1981}
      label="Year"
      change={this.onChange}
      selectedValue={selectedYear}
    />
  </div>
))

问题是，当我在第一个下拉列表中选择

1980

时，所选值也会应用于第二个下拉列表

我的

onChange

看起来是这样的：

const yearDropdown = ({ input, label, arr, change, selectedValue, meta: { touched, error } }) => (
  <div className="form-group">
    <label>{label}</label>
    <select {...input} className="form-control" onChange={change} value={selectedValue}>
      <option value="">Please select</option>
      {arr.map(val => (
        <option value={val} key={val}>
          {val}
        </option>
      ))}
    </select>
    {touched && error && <span style={{color: "red"}}>{error}</span>}
  </div>
)

onChange(e) {
  this.setState({[e.target.name]: e.target.value});
}

---

我是不是错过了一些基本的东西？这看起来很简单，但我想不出来。

它们是受控字段，从外观上看，您将它们都设置为与

selectedValue={selectedYear}

部分共享一个公共的

selectedValue

属性

---

这可能需要类似于

selectedValue={this.state[`year[${i}]`}

它们是受控字段，从外观上看，您可以将它们设置为与

selectedValue={selectedYear}

部分共享一个公共的

selectedValue

属性

---

这可能需要类似于

selectedValue={this.state[`year[${i}]`}

ahhh，这很有道理！我知道这与selectedValue不正确有关，但无法精确定位，谢谢！ahhh，这很有道理！我知道这与selectedValue不正确有关，但无法精确定位，谢谢！