React TypeScript下拉框接收Props时onChange事件失效问题排查

你遇到的核心问题是Select的onChange事件无法正常触发，原因出在三个关键地方：

错误原因分析 #

1. MenuItem使用RouterLink作为component阻断事件
   当给MenuItem设置component={RouterLink}时，RouterLink会接管点击事件的处理逻辑，默认阻止事件冒泡，导致Select的onChange事件无法被捕获。

2. MenuItem缺少value属性
   Select的onChange依赖MenuItem的value属性传递选中值，你当前的MenuItem未设置value，导致handleChange里拿不到有效数据，状态configName无法更新。

3. Select内部混入非MenuItem元素
   你把包含InputBase、Button的div直接放在Select内部，不符合MUI Select的组件结构规范——Select的直接子元素只能是MenuItem或OptGroup，非规范元素会干扰组件的事件处理和渲染逻辑。

修复方案及代码调整 #

1. 调整Select内部结构，移除非MenuItem元素 #

把搜索栏移到Select组件外面，若需要下拉内搜索功能，建议改用MUI的Autocomplete组件实现。

2. 移除MenuItem的RouterLink组件，在onChange中处理路由跳转 #

避免直接用RouterLink覆盖MenuItem的默认行为，而是在Select的handleChange里统一完成路由跳转和回调调用。

3. 给MenuItem添加value属性 #

确保每个MenuItem都有对应的value，让Select能正确识别选中项。

修改后的完整代码 #

import * as React from 'react';
import OutlinedInput from '@mui/material/OutlinedInput';
import MenuItem from '@mui/material/MenuItem';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
import { Box, Button, InputBase } from '@mui/material';
import { useNavigate } from 'react-router-dom';

export interface DropdownComponentProps {
  dashboardnames: Array<{
    name: string,
    link: string
  }>,
  renderDashboard: () => void
}

export function DropdownComponent(props: DropdownComponentProps) {
  const [configName, setConfigName] = React.useState<string>();
  const navigate = useNavigate();

  const handleChange = (event: SelectChangeEvent<typeof configName>) => {
    const { target: { value } } = event;
    setConfigName(value);
    
    // 匹配选中项的路由链接
    const selectedPage = props.dashboardnames.find(page => page.name === value);
    if (selectedPage) {
      navigate(selectedPage.link);
      props.renderDashboard();
    }
  };

  return (
    <Box sx={{ marginTop: -5 }}>
      {/* 搜索栏移至Select外部 */}
      <Box sx={{ marginBottom: 1, display: 'flex', alignItems: 'center', paddingLeft: 1 }}>
        <InputBase placeholder='search' sx={{ width: 150 }} />
        <Button sx={{ marginLeft: 1 }}>
          <SearchOutlinedIcon />
        </Button>
      </Box>

      <Select
        sx={{ width: 190, height: 36 }}
        displayEmpty
        value={configName}
        onChange={handleChange}
        input={<OutlinedInput />}
        renderValue={(selected) => {
          if (!selected) {
            return <>Mushroom tunnel 1</>;
          }
          return selected;
        }}
        inputProps={{ 'aria-label': 'Without label' }}
      >
        <MenuItem disabled value="">
          Frequently visited
        </MenuItem>
        
        {/* 给MenuItem添加value属性，移除component和onClick */}
        {props.dashboardnames.map((page) => (
          <MenuItem
            key={page.name}
            value={page.name}
          >
            {page.name}
          </MenuItem>
        ))}
      </Select>
    </Box>
  );
}

export default DropdownComponent;

关键改动说明 #

• 用useNavigate替代RouterLink实现路由跳转，避免阻断Select的事件流
• 给每个MenuItem添加value={page.name}，确保Select能正确传递选中值到handleChange
• 把搜索栏移到Select外部，保证Select内部只有符合规范的MenuItem元素
• 在handleChange中统一处理状态更新、路由跳转和回调函数调用

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