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

最新推荐文章于 2024-06-05 15:18:14 发布

zoepriselife316

最新推荐文章于 2024-06-05 15:18:14 发布

阅读量2.5k

点赞数

分类专栏： react antd二级导航 Demo 文章标签： react中使用antd的二级菜单点击一个其他关闭

本文链接：https://blog.csdn.net/zoepriselife316/article/details/100919290

版权

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

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 (
      &