Browse Source

使navmenu的所有submenu不可控,一直处于展开状态

dengdx 2 months ago
parent
commit
046ece19c5
1 changed files with 16 additions and 1 deletions
  1. 16 1
      src/layouts/NavMenu.tsx

+ 16 - 1
src/layouts/NavMenu.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
 import { Menu } from 'antd';
@@ -84,9 +84,24 @@ const NavMenu: React.FC = () => {
     const onClick: MenuProps['onClick'] = (e) => {
         console.log('click ', e);
     };
+    // 从items得到所有key
+    const allKeys = items.map(item => item?.key as string);
+    const [openKeys, setOpenKeys] = useState(allKeys); // 初始展开的 key
+
+    // 阻止默认的折叠行为
+    const onOpenChange = (keys) => {
+        // 如果当前的 key 在 openKeys 中,说明用户试图关闭它,我们忽略这个操作
+        if (openKeys.includes(keys[0])) {
+            return;
+        }
+        // 如果用户试图展开其他子菜单,我们也可以选择忽略,或者更新 openKeys
+        setOpenKeys([...openKeys, keys[0]]);
+    };
 
     return (
         <Menu
+            openKeys={openKeys}
+            onOpenChange={onOpenChange}
             onClick={onClick}
             defaultSelectedKeys={['1']}
             defaultOpenKeys={['sub1']}