ReactJS中带Tooltip的Select组件如何获取选中值？

问题原因 #

Tooltip直接包裹MenuItem时，会阻断Select对MenuItem的事件绑定逻辑，导致onChange事件无法正确读取MenuItem的value属性——此时事件目标变为Tooltip组件，因此输出的value为undefined。

解决方案1：将Tooltip嵌套在MenuItem内部 #

把Tooltip作为MenuItem的子元素，让MenuItem保持为Select的直接子节点，这样事件能正常传递，同时hover时仍能显示Tooltip：

<Select
  style={{width: "-webkit-fill-available"}}
  onChange={(e) => {
    console.log('选中值: ', e.target.value);
  }}
  labelId="client-request-select-label"
>
  <MenuItem value="short summary to display as option">
    <Tooltip title="big text to display as tooltip">
      <span>short summary to display as option</span>
    </Tooltip>
  </MenuItem>
</Select>

解决方案2：使用MenuItem原生title属性（简单场景） #

如果不需要自定义Tooltip的样式、显示逻辑，直接用HTML原生title属性更简洁，无需额外引入Tooltip组件：

<MenuItem 
  value="short summary to display as option"
  title="big text to display as tooltip"
>
  short summary to display as option
</MenuItem>

补充说明 #

• 方案1保留了MUI Tooltip的全部自定义能力（如自定义样式、延迟显示、箭头等），适合需要复杂提示效果的场景。
• 方案2代码更轻量化，适合仅需基础文本提示的简单场景。

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