Question

我有4个选择下拉菜单。
所选值不应出现在其余的下拉列表中

我的state看起来像这样

this.state = {
    selectedDropdownArray: {},
    dropdownArray: ['select','1','2','3','4','5']
}

下面是我的选择下拉组件

<SelectDropdown
    options={this.state.dropdownArray}
    value={this.getValue()}
    onChange={this.handleChange.bind(this)}

在handleChange函数中，我只是将值首先推送到其余工作所需的对象，然后修改dropdownArray。下拉列表的数组列表应根据选择进行过滤。

下面是我的handleChange函数，该函数会过滤下拉列表中的值。

handleChange(name, value){
    switch(name){
        case '1' :
            this.state.selectedDropdownArray["0"] = value === "select" ? null : value
        break;
        case '2' :
            this.state.selectedDropdownArray["1"] = value === "select" ? null : value
        break;
        case '3'
        ...
        ...
    }

    let filter = Object.values(this.state.selectedDropdownArray);
    let difference = this.state.dropdownArray.filter(x => !filter.includes(x));

}

如果选择了第一个值为1的下拉列表，则difference现在具有过滤后的数组[2,3,4,5]，我可以setState到dropdownArray。

但是第一个下拉列表没有1可以显示在此选择中，因为该数组已被过滤。

解决此问题的有效方法是对每个4个select下拉列表进行唯一选择。

Answer 1

第一个：将所选内容定义为数组：

this.state = {
  selectedDropdownArray: [],
  dropdownArray: ['select','1','2','3','4','5']
}

如果由于其他原因而不需要-以后不必使用Object.values()进行过滤。

2nd：避免在渲染中绑定，最好在构造函数中绑定this.handleChange或使用箭头语法-阅读有关处理事件，传递参数的反应文档...

3rd：您可以为每个实例分别使用选项过滤，例如：

<SelectDropdown
  options={this.state.dropdownArray.filter(x => !this.state.selectedDropdownArray.includes(x) || x===this.state.selectedDropdownArray[0])}
  value={this.state.selectedDropdownArray[0] || ''}
  onChange={this.handleChange}
/>

当然要为下一个<SelectDropdown/>实例使用下一个索引；）

具有唯一选择的多选下拉菜单-React JS

1 个答案: