具有唯一选择的多选下拉菜单-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 = {

  selectedDropdownArray: [],

  dropdownArray: ['select','1','2','3','4','5']

}

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

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

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

<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/>实例使用next索引;）