具有唯一选择的多选下拉列表 - React JS

Question

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

我的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 个选择下拉菜单进行唯一选择。

Answer 1

第一个：定义选择为数组：

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

如果由于其他原因不需要 - 稍后在过滤中不需要使用Object.values()。

第二个：避免在渲染中绑定，最好在构造函数中绑定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/> 实例使用下一个索引；）