React中如何实现多个select共享选项并联动禁用已选选项？

核心逻辑 #

所有Select的选中状态是跨组件联动的，不能在单个Select内部维护独立状态，需要把所有Select的选中值集合提升到共同父组件统一管理，实现完全闭环的联动效果：

• 某Select选中选项后，该选项值会被标记为“被占用”，其他Select渲染时自动把对应选项设为不可选
• 某Select修改选中值时，原选中值会从“被占用”集合移除，所有其他Select自动重新计算可选状态，不需要手动恢复选项的可选中性

实现步骤 #

1. 抽离公共配置
   把所有Select通用的选项列表抽为独立常量，后续新增、调整选项只需要修改这一处，避免重复硬编码：

   // 公共下拉选项配置
   const COMMON_OPTIONS = [
     { value: '', label: ' ' }, // 初始空占位项
     { value: 'option1', label: 'Option 1' },
     { value: 'option2', label: 'Option 2' },
     { value: 'option3', label: 'Option 3' }
   ]
   

2. 父组件维护全局选中值状态
   用对象存储每个Select的当前选中值，键为Select的唯一标识（即原组件里的name属性），值为对应选中的选项值，后续新增Select只需要在初始状态中新增对应的键值对即可。
3. 动态计算选项禁用状态
   渲染每个选项时，判断该选项值是否被除当前Select之外的其他Select选中，如果是则给选项加上disabled属性；空占位选项永远保持可选，不参与互斥判断。

完整可复用代码 #

import { useState } from 'react'
// 公共下拉选项配置
const COMMON_OPTIONS = [
  { value: '', label: ' ' }, // 初始空占位项
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' }
]

// 通用互斥Select组件，后续复用无需重复写联动逻辑
function MutuallyExclusiveSelect({ 
  selectName, 
  value, 
  onChange, 
  required, 
  allSelectedValues 
}) {
  return (
    <select
      name={selectName}
      value={value}
      required={required}
      onChange={(e) => onChange(selectName, e.target.value)}
    >
      {COMMON_OPTIONS.map(option => {
        // 空占位项永远可选，不参与互斥判断
        if (option.value === '') {
          return <option key={option.value} label={option.label}></option>
        }
        // 判断当前选项是否被其他Select占用
        const isOccupied = Object.entries(allSelectedValues).some(
          ([name, selectedVal]) => name !== selectName && selectedVal === option.value
        )
        return (
          <option
            key={option.value}
            value={option.value}
            disabled={isOccupied}
          >
            {option.label}
          </option>
        )
      })}
    </select>
  )
}

export default function ExampleComponent() {
  // 全局存储所有互斥Select的选中值，后续新增Select直接在这里加初始值即可
  const [selectValueMap, setSelectValueMap] = useState({
    select1: '',
    select2: '',
    // 新增select3示例：select3: ''
  })

  // 统一处理选中值变更
  const handleValueChange = (selectName, newValue) => {
    setSelectValueMap(prev => ({
      ...prev,
      [selectName]: newValue
    }))
  }

  return (
    <div>
      <MutuallyExclusiveSelect
        selectName="select1"
        value={selectValueMap.select1}
        onChange={handleValueChange}
        required
        allSelectedValues={selectValueMap}
      />
      <MutuallyExclusiveSelect
        selectName="select2"
        value={selectValueMap.select2}
        onChange={handleValueChange}
        allSelectedValues={selectValueMap}
      />
      {/* 后续新增Select直接按以下格式调用即可 */}
      {/* <MutuallyExclusiveSelect
        selectName="select3"
        value={selectValueMap.select3}
        onChange={handleValueChange}
        allSelectedValues={selectValueMap}
      /> */}
    </div>
  )
}

方案优势 #

• 可扩展性强：后续新增Select不需要修改原有联动逻辑，只需要在状态初始值加对应键值对、调用通用组件即可
• 状态自动同步：基于React的单向数据流，状态更新时所有相关组件会自动重新渲染，不需要手动遍历每个Select去修改选项状态
• 逻辑闭环：选中值变更时，原选项的占用状态会自动解除，不存在状态残留、选项无法恢复可选的问题

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