ReactJS：两个react-select共用数据源时移除已选项

要实现两个react-select组件的互斥选择逻辑（选中某一选项后，该选项从两个组件的可选列表中移除；清空所有选中项后恢复初始选项），可以通过状态管理+动态过滤选项的方式实现，以下是完整的可运行示例：

核心实现步骤 #

1. 维护两个组件的选中状态
2. 根据当前选中值动态过滤原始选项列表
3. 提供清空功能重置状态，恢复初始选项

完整代码示例 #

import { useState } from 'react';
import Select from 'react-select';

// 原始选项数据源
const initialOptions = [
  {value: 1, label: 'Nguyen Van A'},
  {value: 2, label: 'Nguyen Van B'},
  {value: 3, label: 'Nguyen Van C'},
  {value: 4, label: 'Nguyen Van D'},
  {value: 5, label: 'Nguyen Van E'},
  {value: 6, label: 'Nguyen Van F'},
];

const MutuallyExclusiveSelects = () => {
  // 存储审批人和组所有者的选中值
  const [selectedApprover, setSelectedApprover] = useState(null);
  const [selectedGroupOwner, setSelectedGroupOwner] = useState(null);

  // 生成过滤后的选项：排除已选中的项
  const getFilteredOptions = () => {
    const excludedValues = [];
    if (selectedApprover) excludedValues.push(selectedApprover.value);
    if (selectedGroupOwner) excludedValues.push(selectedGroupOwner.value);
    
    return initialOptions.filter(option => !excludedValues.includes(option.value));
  };

  // 清空所有选中状态
  const clearAll = () => {
    setSelectedApprover(null);
    setSelectedGroupOwner(null);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '400px' }}>
      <div style={{ marginBottom: '15px' }}>
        <label style={{ display: 'block', marginBottom: '5px' }}>审批人</label>
        <Select
          value={selectedApprover}
          onChange={setSelectedApprover}
          options={getFilteredOptions()}
          placeholder="选择审批人"
          isClearable
        />
      </div>

      <div style={{ marginBottom: '15px' }}>
        <label style={{ display: 'block', marginBottom: '5px' }}>组所有者</label>
        <Select
          value={selectedGroupOwner}
          onChange={setSelectedGroupOwner}
          options={getFilteredOptions()}
          placeholder="选择组所有者"
          isClearable
        />
      </div>

      <button onClick={clearAll} style={{ padding: '8px 16px', cursor: 'pointer' }}>
        清空所有选择
      </button>
    </div>
  );
};

export default MutuallyExclusiveSelects;

关键细节说明 #

• 动态过滤逻辑：getFilteredOptions函数会收集当前已选中的所有值，然后从原始列表中排除这些值对应的选项，确保两个组件的可选列表始终同步排除已选项目
• 单独清空支持：给react-select添加isClearable属性，用户可以单独清空某一个组件的选中值，此时另一个组件的可选列表会自动更新，重新包含之前被排除的选项
• 状态重置：点击清空按钮时，将两个选中状态重置为null，过滤函数会返回完整的原始选项列表，恢复初始状态

内容的提问来源于stack exchange，提问作者Minh Nhựt Nguyễn