React项目中Ant Design Dropdown子菜单项点击保持展开的实现问询

针对React中Ant Design Dropdown带二级子菜单时，点击子菜单项菜单自动关闭的问题，提供两种可行方案，适配官方推荐的menu属性：

方案一：受控模式手动控制菜单可见性 #

通过维护Dropdown的visible状态，在菜单点击事件中区分一级菜单项和子菜单项，仅在点击一级菜单项时关闭菜单：

import { useState } from 'react';
import { Dropdown, Menu } from 'antd';

const CustomDropdown = () => {
  const [dropdownVisible, setDropdownVisible] = useState(false);

  const handleMenuClick = (menuEvent) => {
    // 根据菜单项key区分是否为子菜单项（可自定义规则）
    if (!menuEvent.key.includes('sub')) {
      // 点击一级菜单项时关闭菜单
      setDropdownVisible(false);
    }
    // 子菜单项点击后不修改visible状态，保持展开
  };

  const handleOpenChange = (newVisible) => {
    setDropdownVisible(newVisible);
  };

  const dropdownMenu = (
    <Menu onClick={handleMenuClick}>
      <Menu.SubMenu title="分组菜单">
        <Menu.Item key="sub-item-1">子选项1</Menu.Item>
        <Menu.Item key="sub-item-2">子选项2</Menu.Item>
      </Menu.SubMenu>
      <Menu.Item key="normal-item">普通一级选项</Menu.Item>
    </Menu>
  );

  return (
    <Dropdown
      menu={dropdownMenu}
      visible={dropdownVisible}
      onOpenChange={handleOpenChange}
    >
      <a style={{ cursor: 'pointer' }}>点击展开菜单</a>
    </Dropdown>
  );
};

export default CustomDropdown;

方案二：优化stopPropagation覆盖全菜单项空间 #

针对你之前尝试的stopPropagation方法存在的点击边缘失效问题，只需让包裹的容器占满整个菜单项的空间，确保点击任何区域都能阻止事件冒泡：

import { Dropdown, Menu } from 'antd';

const CustomDropdown = () => {
  const dropdownMenu = (
    <Menu>
      <Menu.SubMenu title="分组菜单">
        <Menu.Item key="sub-item-1">
          <div 
            style={{
              width: '100%',
              height: '100%',
              padding: '8px 16px', // 对齐Ant Design默认菜单项内边距
              cursor: 'pointer'
            }}
            onClick={(e) => e.stopPropagation()}
          >
            子选项1
          </div>
        </Menu.Item>
        <Menu.Item key="sub-item-2">
          <div 
            style={{
              width: '100%',
              height: '100%',
              padding: '8px 16px',
              cursor: 'pointer'
            }}
            onClick={(e) => e.stopPropagation()}
          >
            子选项2
          </div>
        </Menu.Item>
      </Menu.SubMenu>
      <Menu.Item key="normal-item">普通一级选项</Menu.Item>
    </Menu>
  );

  return (
    <Dropdown menu={dropdownMenu}>
      <a style={{ cursor: 'pointer' }}>点击展开菜单</a>
    </Dropdown>
  );
};

export default CustomDropdown;

两种方案都无需使用已废弃的overlay属性，完全适配当前Ant Design的推荐用法。方案一适合需要精细控制菜单显示逻辑的场景，方案二更简单直接，适合快速修复点击边缘失效的问题。

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