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

Question

I have a ReactJS component, I am using Redux form, and I am building a wizard. I have some dynamic dropdowns being created in a step and the output looks like the following:

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

And the code that generates the above is the following:

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

The yearDropdown component that Field wraps looks like so:

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

The issue is that when I select 1980 in the first dropdown, the selected value also gets applied to the second dropdown.

My onChange looks like so:

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

Am I missing something basic here? As simple as this would seem, I can't figure it out.

Answer 1

They are controlled fields and by the looks of it you set all of them to share a common selectedValue property with the selectedValue={selectedYear} part.

That would probably need to be something like selectedValue={this.state[`year[${i}]`}