React中如何为单个<select>元素绑定onChange更新对应state

嘿，这个问题我之前也碰到过！核心原因是你现在所有的<Select>组件都绑定到了同一个state字段，而且部分属性配置有误，导致修改其中一个时，所有下拉框都会同步变化。咱们一步步来修复：

问题根源分析 #

• 你所有的<Select>都把name属性写死成了"newstatus"，而且state里只维护了一个newstatus字段——不管哪个下拉框触发onChange，都会把这个单一字段的值覆盖，自然所有下拉框都会显示同一个值。
• 虽然你在inputProps里设置了name: val.name，但<Select>本身的name属性优先级更高，所以onChange时e.target.name拿到的还是写死的"newstatus"。

解决方案步骤 #

1. 重构state结构，为每个下拉框单独存值 #

把原来单一的newstatus字段改成一个对象statuses，用来存储每个下拉框的选中值，键可以用每个选项的name：

this.state = {
  firstname: '',
  lastname: '',
  status: 'Available',
  // 替换原来的newstatus，用对象存储每个下拉框的状态
  statuses: {},
  hits: [],
  isLoading: false,
  error: null,
};

2. 修正<Select>的属性配置 #

在渲染<Select>时，要确保每个下拉框对应独立的state字段，并且name属性正确绑定：

• 把<Select>的name从固定的"newstatus"改成val.name
• value属性改为从statuses对象中取对应的值，默认可以用该选项的第一个值
• 移除重复的inputProps里的name（<Select>的name属性已经足够）

3. 更新onChange方法，正确更新对应字段 #

因为现在state是对象，更新时要使用展开运算符合并原有状态，避免覆盖其他下拉框的值：

onChange (e) {
  const { name, value } = e.target;
  this.setState(prevState => ({
    statuses: {
      ...prevState.statuses,
      [name]: value
    }
  }));
}

4. 初始化默认值（可选） #

如果希望页面加载时每个下拉框都有默认选中值，可以在constructor里初始化statuses：

// 基于你的选项数组初始化默认值
this.state = {
  // ...其他状态
  statuses: optionsArray.options.reduce((acc, item) => {
    acc[item.name] = item.value[0]; // 默认选中第一个选项
    return acc;
  }, {})
};

修改后的完整代码示例 #

// 假设你的选项数组定义是这样的
const optionsArray = {
  options: [ 
    {name: "Change status", value:["Available", "Not Available", "Vacation"]},
    {name: "Another status", value:["Active", "Inactive", "Pending"]}
  ] 
};

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      firstname: '',
      lastname: '',
      status: 'Available',
      // 初始化每个下拉框的默认值
      statuses: optionsArray.options.reduce((acc, item) => {
        acc[item.name] = item.value[0];
        return acc;
      }, {}),
      hits: [],
      isLoading: false,
      error: null,
    };
    this.onChange = this.onChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.loadoptions = this.loadoptions.bind(this)
  }

  onChange (e) {
    const { name, value } = e.target;
    this.setState(prevState => ({
      statuses: {
        ...prevState.statuses,
        [name]: value
      }
    }));
  }

  loadoptions = () => {
    const OptionsArray = []
    let OptionsData = optionsArray.options
    OptionsData.forEach((val, index) => {
      let OptionsDatavalue = val.value
      OptionsArray.push(
        <FormControl key={index}> {/* 把key移到FormControl上更合理 */}
          <InputLabel htmlFor={`controlled-open-select-${index}`}>{val.name}</InputLabel> {/* 修正label的for属性，避免重复 */}
          <Select
            name={val.name} // 绑定正确的name
            value={this.state.statuses[val.name]}
            onChange={this.onChange}
          >
            {OptionsDatavalue.map(option => (
              <MenuItem key={option} value={option}>
                {option}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      );
    });
    return OptionsArray;
  };

  render() {
    return (
      <form autoComplete="off" className="new_status">
        {this.loadoptions()} {/* 不需要嵌套额外的FormControl，因为每个选项已经有FormControl了 */}
      </form>
    )
  }
}

这样修改后，每个下拉框的选中状态都会独立存储和更新，修改其中一个时，其他下拉框不会受到影响。

内容的提问来源于stack exchange，提问作者Yan Husid