react中使用antd的二级菜单点击一个其他关闭

直接上代码
以下是官网的例子

import { Menu, Icon } from 'antd';

const { SubMenu } = Menu;

class Sider extends React.Component {
  // submenu keys of first level
  //带下拉的submenu
  rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
//默认一个打开的keys
 this.state = {
      collapsed: false,
      openKeys: ['']
    };
//在触发改变二级菜单时打开当前openKeys,关闭其他,官网的写法
 // onOpenChange = openKeys => {
   // const latestOpenKey = openKeys.find(key => //this.state.openKeys.indexOf(key) === -1);
  //  if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
    //  this.setState({ openKeys });
    //} else {
     // this.setState({
       // openKeys: latestOpenKey ? [latestOpenKey] : [],
      //});
    //}
  //};
//当点击二级菜单时,有一个没有下拉的,所以折叠二级菜单是这么写的,具体看需求
  onOpenChange = openKeys => {
    this.setState({
      openKeys
    })
  };
  render() {
    return (
      
        
              
              Navigation One
            
          }
        >
          Option 1
          Option 2
          Option 3
          Option 4
        
        
              
              Navigation Two
            
          }
        >
          Option 5
          Option 6
          
            Option 7
            Option 8
          
        
        
              
              Navigation Three
            
          }
        >
          Option 9
          Option 10
          Option 11
          Option 12
        
      
    );
  }
}

ReactDOM.render(, mountNode);

若只需要实现打开当前,关闭其他的二级导航,则以上代码就可以
注意:
openKeys是数组,传值一定要传对
若想在刷新页面后依然保持在当前打开状态,需要使用导航配合使用,监听导航的变化,然后修改state中的值(指的是选中的二级菜单的值,我是配合面包屑导航做的),在修改的值完了以后,重新setState中 openKeys的值,变成当前选中的openKeys的值

贴个地址:
https://ant-design.gitee.io/components/menu-cn/

你可能感兴趣的:(react,antd二级导航,Demo)