如何实现两个具有互斥选项的React-Select多选选择框？

当然可以实现！针对React-Select v1的场景，我们只需要根据第一个选择框的选中值，动态修改第二个选择框的选项配置就行。下面给你两种实用的方案，按需选择：

方案1：禁用已选中的选项（推荐，保留视觉提示） #

这种方案会让第二个选择框里的已选选项变成灰色不可点击状态，用户能清楚看到哪些水果已经被标记为“喜欢”，体验更直观。

因为你用了Formik的Field组件，我们可以直接通过Formik的values对象获取“我喜欢的水果”的选中值，然后遍历原水果数组给对应的选项加上disabled属性：

<Field 
  name='fruitsIHate' 
  selectConfig={{
    closeOnSelect: false,
    component: renderSelect,
    disabled: false,
    multi: true,
    simpleValue: false,
    removeSelected: true,
  }} 
  options={
    fruits.map(fruit => ({
      ...fruit,
      // 判断当前水果是否在已选的喜欢列表中，是则禁用
      disabled: values.fruitsILove?.some(selected => selected.value === fruit.value)
    }))
  } 
/>

如果你的项目没有用Formik，而是用组件自身的状态管理，思路也是一样的：给第一个Select绑定onChange事件，把选中值存在state里，再用state来处理第二个Select的选项：

class FruitPicker extends React.Component {
  state = { lovedFruits: [] };

  handleLovedSelect = (selectedItems) => {
    this.setState({ lovedFruits: selectedItems });
  };

  render() {
    const { lovedFruits } = this.state;
    // 生成带禁用标记的选项数组
    const hateOptions = fruits.map(fruit => ({
      ...fruit,
      disabled: lovedFruits.some(item => item.value === fruit.value)
    }));

    return (
      <>
        <Select
          name='fruitsILove'
          closeOnSelect={false}
          multi={true}
          simpleValue={false}
          removeSelected={true}
          options={fruits}
          onChange={this.handleLovedSelect}
        />
        <Select
          name='fruitsIHate'
          closeOnSelect={false}
          multi={true}
          simpleValue={false}
          removeSelected={true}
          options={hateOptions}
        />
      </>
    );
  }
}

方案2：直接隐藏已选中的选项 #

如果希望第二个选择框里完全看不到已被选中的喜欢水果，可以用filter方法直接过滤掉这些选项：

<Field 
  name='fruitsIHate' 
  selectConfig={{
    closeOnSelect: false,
    component: renderSelect,
    disabled: false,
    multi: true,
    simpleValue: false,
    removeSelected: true,
  }} 
  options={
    fruits.filter(fruit => 
      // 只保留不在喜欢列表中的水果
      !values.fruitsILove?.some(selected => selected.value === fruit.value)
    )
  } 
/>

注意事项 #

• 如果你自定义了renderSelect组件，要确保它能正确识别并渲染disabled属性的样式（React-Select v1的默认组件是支持的，但自定义组件需要额外处理）。
• 因为是多选模式，要注意判断时用some方法检查数组中是否存在匹配项，而不是直接比较单个值。

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