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

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选择下拉列表具有唯一选择。

Answer 1

1st：定义选定为数组：this.state = {&nbsp; selectedDropdownArray: [],&nbsp; dropdownArray: ['select','1','2','3','4','5']}如果由于其他原因不需要它-以后将不需要使用它Object.values()进行过滤。第二：避免在渲染中绑定this.handleChange，最好在构造函数中绑定或使用箭头语法-阅读有关处理事件，传递参数的反应文档...第三：您可以为每个实例分别使用选项过滤，例如：<SelectDropdown&nbsp; options={this.state.dropdownArray.filter(x => !this.state.selectedDropdownArray.includes(x) || x===this.state.selectedDropdownArray[0])}&nbsp; value={this.state.selectedDropdownArray[0] || ''}&nbsp; onChange={this.handleChange}/>当然，对下一个<SelectDropdown/>实例使用next索引;）