Question

我有一个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>
))

yearDropdown包装的Field组件看起来像这样：

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

问题在于，当我在 first 下拉列表中选择1980时，所选值也将应用于 second 下拉列表。

我的onChange如下：

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

我在这里缺少基本的东西吗？如此简单，我无法弄清楚。

Answer 1

它们是受控字段，从外观上，您将它们设置为与selectedValue部分共享一个公用selectedValue={selectedYear}属性。

那可能需要像selectedValue={this.state[`year[${i}]`}

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

1 个答案: