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 (
      <Menu
        mode="inline"
        openKeys={this.state.openKeys}
        onOpenChange={this.onOpenChange}
        style={{ width: 256 }}
      >
        <SubMenu
          key="sub1"
          title={
            <span>
              <Icon type="mail" />
              <span>Navigation One</span>
            </span>
          }
        >
          <Menu.Item key="1">Option 1</Menu.Item>
          <Menu.Item key="2">Option 2</Menu.Item>
          <Menu.Item key="3">Option 3</Menu.Item>
          <Menu.Item key="4">Option 4</Menu.Item>
        </SubMenu>
        <SubMenu
          key="sub2"
          title={
            <span>
              <Icon type="appstore" />
              <span>Navigation Two</span>
            </span>
          }
        >
          <Menu.Item key="5">Option 5</Menu.Item>
          <Menu.Item key="6">Option 6</Menu.Item>
          <SubMenu key="sub3" title="Submenu">
            <Menu.Item key="7">Option 7</Menu.Item>
            <Menu.Item key="8">Option 8</Menu.Item>
          </SubMenu>
        </SubMenu>
        <SubMenu
          key="sub4"
          title={
            <span>
              <Icon type="setting" />
              <span>Navigation Three</span>
            </span>
          }
        >
          <Menu.Item key="9">Option 9</Menu.Item>
          <Menu.Item key="10">Option 10</Menu.Item>
          <Menu.Item key="11">Option 11</Menu.Item>
          <Menu.Item key="12">Option 12</Menu.Item>
        </SubMenu>
      </Menu>
    );
  }
}

ReactDOM.render(<Sider />, mountNode);
           

若隻需要實作打開目前，關閉其他的二級導航，則以上代碼就可以

注意：

openKeys是數組，傳值一定要傳對

若想在重新整理頁面後依然保持在目前打開狀态，需要使用導航配合使用，監聽導航的變化，然後修改state中的值（指的是選中的二級菜單的值，我是配合面包屑導航做的），在修改的值完了以後，重新setState中 openKeys的值，變成目前選中的openKeys的值

貼個位址：

https://ant-design.gitee.io/components/menu-cn/