ReactJS MUI Select组件如何获取预选中值及对应原生事件

核心结论 #

MUI Select 没有官方原生暴露的预选中（临时高亮选项）变化监听事件，该状态属于Select内部维护的状态，默认不对外抛出。

最简适配方案（无需封装组件） #

你之前仅实现了鼠标悬停的监听逻辑，只需要补充MenuItem的onFocus事件即可覆盖键盘上下键切换的场景：键盘导航选中选项时会触发对应MenuItem的onFocus事件，你可以统一合并鼠标悬停、焦点获取的回调逻辑，即可拿到所有场景下的实时预选中值。
示例代码如下：

import { useState } from 'react';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

const MySelect = () => {
  // 实际选中值
  const [selectedValue, setSelectedValue] = useState('public');
  // 预选中高亮值
  const [highlightedOption, setHighlightedOption] = useState(null);

  const options = [
    { value: 'public', label: 'Public', tip: '所有访客可访问' },
    { value: 'restricted', label: 'Restricted', tip: '仅授权成员可访问' },
    { value: 'private', label: 'Private', tip: '仅自己可访问' }
  ];

  return (
    <div>
      <Select
        value={selectedValue}
        onChange={(e) => setSelectedValue(e.target.value)}
      >
        {options.map(opt => (
          <MenuItem
            key={opt.value}
            value={opt.value}
            // 监听鼠标悬停
            onMouseEnter={() => setHighlightedOption(opt)}
            // 监听键盘导航高亮
            onFocus={() => setHighlightedOption(opt)}
            // 选项失焦时清除高亮值，避免残留
            onBlur={() => {
              if (highlightedOption?.value === opt.value) {
                setHighlightedOption(null);
              }
            }}
          >
            {opt.label}
          </MenuItem>
        ))}
      </Select>

      {/* 你的提示卡片组件 */}
      {highlightedOption && <TipCard content={highlightedOption.tip} />}
    </div>
  );
};

通用封装方案 #

如果有多处业务需要用到预选中监听能力，你可以自行封装自定义Select组件，把上述逻辑内置，对外抛出onHighlightChange自定义事件，调用方直接传入回调即可获取实时高亮值，无需每个MenuItem单独绑定事件。

补充说明 #

• MUI的Autocomplete组件原生提供了onHighlightChange事件可以直接监听高亮值变化，但Select组件目前没有对应的原生支持，官方暂无新增该能力的公开规划。
• 上述方案同时兼容鼠标悬停、键盘上下键导航、移动端触摸高亮三种常见的预选中场景。

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