React中实现依赖下拉框选项禁用功能的方案咨询

优化数据结构 #

先调整数据结构，适配动态渲染需求，避免硬编码属性名：

// 下拉框配置：key对应下拉框唯一标识，包含标签和选项列表
const dropdownConfigs = {
  type: {
    label: "游戏类型",
    options: [
      { id: 1, value: "Indoor", relatedIds: [2] }, // 关联sport的id=2（Chess）
      { id: 2, value: "Outdoor", relatedIds: [1, 3] } // 关联sport的id=1（Tennis）、3（Football）
    ]
  },
  sport: {
    label: "运动项目",
    options: [
      { id: 1, value: "Tennis", relatedIds: [2] }, // 关联type的id=2（Outdoor）
      { id: 2, value: "Chess", relatedIds: [1] }, // 关联type的id=1（Indoor）
      { id: 3, value: "Football", relatedIds: [2] } // 关联type的id=2（Outdoor）
    ]
  }
};

// 建立下拉框关联映射，快速定位当前下拉框的依赖项
const dropdownRelations = {
  type: "sport",
  sport: "type"
};

核心实现逻辑 #

1. 状态管理：用对象保存所有下拉框的选中值，适配任意数量的动态下拉框
2. 动态渲染：遍历dropdownConfigs的key，自动生成对应的Antd Select组件
3. 禁用判断：针对每个选项，根据关联下拉框的选中值决定是否禁用：
   • 关联下拉框无选中值时，所有选项均启用
   • 关联下拉框有选中值时，仅保留与选中项relatedIds匹配的选项为启用状态

完整代码示例 #

import React, { useState } from 'react';
import { Select } from 'antd';

const { Option } = Select;

const DependentDropdowns = () => {
  // 存储所有下拉框的选中值，key与dropdownConfigs的标识对应
  const [selectedValues, setSelectedValues] = useState({
    type: null,
    sport: null
  });

  // 处理下拉框选择事件
  const handleSelectChange = (dropdownKey, value) => {
    setSelectedValues(prev => ({
      ...prev,
      [dropdownKey]: value
    }));
  };

  // 处理下拉框清空事件
  const handleSelectClear = (dropdownKey) => {
    setSelectedValues(prev => ({
      ...prev,
      [dropdownKey]: null
    }));
  };

  // 判断当前选项是否需要禁用
  const isOptionDisabled = (currentDropdownKey, option) => {
    const relatedDropdownKey = dropdownRelations[currentDropdownKey];
    const relatedSelectedValue = selectedValues[relatedDropdownKey];
    
    // 关联下拉框无选中值，所有选项启用
    if (!relatedSelectedValue) return false;

    // 找到关联下拉框的选中项
    const relatedSelectedOption = dropdownConfigs[relatedDropdownKey].options.find(
      opt => opt.value === relatedSelectedValue
    );

    // 当前选项id不在关联选中项的relatedIds中则禁用
    return !relatedSelectedOption?.relatedIds.includes(option.id);
  };

  return (
    <div style={{ padding: '20px' }}>
      {/* 动态遍历配置生成所有下拉框 */}
      {Object.keys(dropdownConfigs).map(dropdownKey => {
        const { label, options } = dropdownConfigs[dropdownKey];
        return (
          <div key={dropdownKey} style={{ marginBottom: '15px' }}>
            <label style={{ marginRight: '10px' }}>{label}:</label>
            <Select
              allowClear
              style={{ width: 200 }}
              value={selectedValues[dropdownKey]}
              onChange={(value) => handleSelectChange(dropdownKey, value)}
              onClear={() => handleSelectClear(dropdownKey)}
            >
              {options.map(option => (
                <Option
                  key={option.id}
                  value={option.value}
                  disabled={isOptionDisabled(dropdownKey, option)}
                >
                  {option.value}
                </Option>
              ))}
            </Select>
          </div>
        );
      })}
    </div>
  );
};

export default DependentDropdowns;

额外说明 #

• 方案支持扩展更多相互依赖的下拉框，只需在dropdownConfigs和dropdownRelations中添加对应配置即可
• 全程无硬编码下拉框属性名，所有渲染和逻辑均为动态处理
• 完美兼容allowClear功能，清空任意下拉框后，关联下拉框的禁用状态会自动恢复

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