Antd v5 点击Tooltip触发MenuItem选中问题求助

问题场景 #

我使用Ant Design v5的Sider、Menu、Tooltip组件时，将MenuItem的标签用Tooltip包裹后出现了以下问题：

• 鼠标悬停时Tooltip正常显示
• 点击Tooltip区域会触发MenuItem的选中状态变更
• 期望仅点击MenuItem本身（非Tooltip区域）时才触发选中状态切换，未在组件API中找到直接解决方法

问题代码 #

import React, { useState } from 'react';
import './index.css';
import { DesktopOutlined, PieChartOutlined } from '@ant-design/icons';
import { MenuProps, Tooltip } from 'antd';
import { Layout, Menu } from 'antd';

const { Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[]
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const items: MenuItem[] = [
  getItem('Option 1', '1', <PieChartOutlined />),
  getItem(
    <Tooltip title="Test" placement="right">
      Option 2
    </Tooltip>,
    '2',
    <DesktopOutlined />
  ),
];

const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          defaultSelectedKeys={['1']}
          mode="inline"
          items={items}
        />
      </Sider>
    </Layout>
  );
};

export default App;

解决方案 #

问题核心是Tooltip的点击事件会冒泡到父级MenuItem，导致触发选中状态变更。只需阻止Tooltip内部元素的事件冒泡即可，以下两种方案均可实现需求：

方案1：给Tooltip组件添加阻止冒泡事件 #

直接在Tooltip上绑定onClick事件，阻止事件向上传递：

const items: MenuItem[] = [
  getItem('Option 1', '1', <PieChartOutlined />),
  getItem(
    <Tooltip title="Test" placement="right" onClick={(e) => e.stopPropagation()}>
      Option 2
    </Tooltip>,
    '2',
    <DesktopOutlined />
  ),
];

方案2：给Tooltip内部的文本容器添加阻止冒泡事件 #

如果需要更精细的控制，可以将文本放在span标签中，给span添加阻止冒泡事件：

const items: MenuItem[] = [
  getItem('Option 1', '1', <PieChartOutlined />),
  getItem(
    <Tooltip title="Test" placement="right">
      <span onClick={(e) => e.stopPropagation()}>Option 2</span>
    </Tooltip>,
    '2',
    <DesktopOutlined />
  ),
];

两种方案都能实现：点击Tooltip的文本区域时不会触发MenuItem选中，点击MenuItem的图标、空白区域时仍可正常切换选中状态。

效果截图 #

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