react-select两个下拉框共用选项集时如何过滤已选选项避免重复选择

你需要对现有代码做三处调整即可实现需求：

1. 扩展state结构 #

在原有countries基础上新增两个字段，分别存储两个下拉框的选中值：

this.state = {
  countries: [
    {
      label: "Italy",
      value: "Italy"
    },
    {
      label: "France",
      value: "France"
    },
    {
      label: "Belgium",
      value: "Belgium"
    },
    {
      label: "United Kingdom",
      value: "United Kingdom"
    }
  ],
  // 第一个下拉框选中值
  selectedList1: [],
  // 第二个下拉框选中值
  selectedList2: []
}

2. 修改Select组件属性 #

不再直接共用原始countries作为选项，动态过滤排除另一个下拉框已选的选项，同时给onChange传入标识区分触发源、绑定当前选中值：

{/* 第一个下拉框：可选范围排除第二个下拉框已选内容 */}
<Select 
  options={this.state.countries.filter(item => !this.state.selectedList2.some(sel => sel.value === item.value))}
  components={animatedComponents}
  isMulti
  closeMenuOnSelect={false}
  value={this.state.selectedList1}
  onChange={(val) => this.handleChange(val, 1)}
/>

{/* 第二个下拉框：可选范围排除第一个下拉框已选内容 */}
<Select 
  options={this.state.countries.filter(item => !this.state.selectedList1.some(sel => sel.value === item.value))}
  components={animatedComponents}
  isMulti
  closeMenuOnSelect={false}
  value={this.state.selectedList2}
  onChange={(val) => this.handleChange(val, 2)}
/>

3. 实现handleChange逻辑 #

根据触发源的标识更新对应下拉框的选中状态即可：

handleChange = (selectedOption, type) => {
  // type=1对应第一个下拉框，type=2对应第二个下拉框
  this.setState({
    [type === 1 ? 'selectedList1' : 'selectedList2']: selectedOption || []
  })
};

说明 #

• 代码中selectedOption || []是为了处理下拉框清空时返回null的边界情况，避免后续过滤逻辑报错
• 过滤时通过value字段匹配选项，避免引用类型对象比对不准确的问题
• 该方案同时兼容单选、多选模式，只要保证所有国家选项的value唯一即可正常运行

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