React实现MUI下拉框联动：根据首选项填充次下拉选项

假设你已经定义了基础状态、事件处理函数和选项数据，实现两个下拉框的联动逻辑核心就两步：

1. 绑定第一个下拉框的选择事件 #

在第一个下拉框（queryType）的onChange回调里，除了更新自身选中状态，建议同时重置第二个下拉框的选中值，避免出现子选项与当前类型不匹配的残留问题：

const handleQueryTypeChange = (event) => {
  const selectedType = event.target.value;
  setQueryType(selectedType);
  // 切换类型时清空子分类选中值
  setSubCategory('');
};

2. 动态渲染第二个下拉框的选项 #

根据当前queryType的选中值，从subTypes中取出对应的子选项数组，直接作为第二个下拉框的渲染数据源：

// 取当前类型对应的子选项，默认空数组防止报错
const currentSubOptions = subTypes[queryType] || [];

完整可运行示例 #

import React, { useState } from 'react';
import { FormControl, InputLabel, Select, MenuItem, Box } from '@mui/material';

export default function LinkedSelects() {
  // 状态定义
  const [queryType, setQueryType] = useState('');
  const [subCategory, setSubCategory] = useState('');

  // 预定义的子选项数据
  const subTypes = {
    A: [
      { value: 'a1', label: '分类A-1' },
      { value: 'a2', label: '分类A-2' },
      { value: 'a3', label: '分类A-3' }
    ],
    B: [
      { value: 'b1', label: '分类B-1' },
      { value: 'b2', label: '分类B-2' }
    ],
    C: [
      { value: 'c1', label: '分类C-1' }
    ]
  };

  // 第一个下拉框的事件处理
  const handleQueryTypeChange = (event) => {
    const selectedType = event.target.value;
    setQueryType(selectedType);
    setSubCategory('');
  };

  // 第二个下拉框的事件处理
  const handleSubCategoryChange = (event) => {
    setSubCategory(event.target.value);
  };

  // 获取当前类型对应的子选项
  const currentSubOptions = subTypes[queryType] || [];

  return (
    <Box sx={{ minWidth: 200, display: 'flex', gap: 2, p: 2 }}>
      {/* 第一个下拉框：queryType */}
      <FormControl fullWidth>
        <InputLabel id="query-type-label">查询类型</InputLabel>
        <Select
          labelId="query-type-label"
          id="query-type-select"
          value={queryType}
          label="查询类型"
          onChange={handleQueryTypeChange}
        >
          <MenuItem value="A">类型A</MenuItem>
          <MenuItem value="B">类型B</MenuItem>
          <MenuItem value="C">类型C</MenuItem>
        </Select>
      </FormControl>

      {/* 第二个下拉框：subCategory */}
      <FormControl fullWidth disabled={!queryType}>
        <InputLabel id="sub-category-label">子分类</InputLabel>
        <Select
          labelId="sub-category-label"
          id="sub-category-select"
          value={subCategory}
          label="子分类"
          onChange={handleSubCategoryChange}
          disabled={!queryType}
        >
          {currentSubOptions.map(option => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </Box>
  );
}

额外优化建议 #

• 给第二个下拉框添加disabled属性，未选择第一个下拉框时禁用，避免无效操作
• 始终给currentSubOptions设置默认空数组，防止queryType未匹配时出现渲染报错

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