import React, {Component} from 'react'
import {Menu, Icon, Button, Modal} from 'antd';
import './LeisurePriceStock.less'

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

class LeisurePriceStock extends Component {
  constructor(props) {
    super(props)
    this.state = {
      modalVisible: false,
      panes: [
        {
          title: "一二三四五六七八九十一二三四",
          index: 'hierarchy-1',
          hierarchyOrContent: 'hierarchy',
          content: [
            {
              title: "一二三四五六七八九十一二三四",
              hierarchyOrContent: "content",
              index: 'hierarchy-1-content-1',
            },
            {
              title: "一二三四五六七八九十一二三四",
              hierarchyOrContent: "content",
              index: 'hierarchy-1-content-2',
            }
          ]
        },
        {
          title: "一二三四五六七八九十一二三四",
          index: 'hierarchy-2',
          hierarchyOrContent: 'hierarchy',
          content: [
            {
              title: "一二三四五六七八九十一二三四",
              hierarchyOrContent: "content",
              index: 'hierarchy-2-content-1',
            },
            {
              title: "一二三四五六七八九十一二三四",
              hierarchyOrContent: "content",
              index: 'hierarchy-2-content-2',
            }
          ]
        },
        {
          title: "一二三四五六七八九十一二三四",
          hierarchyOrContent: "content",
          index: 'content-1',
        },
        {
          title: "一二三四五六七八九十一二三四",
          hierarchyOrContent: "content",
          index: 'content-2',
        }
      ]
    }
  }

  //導(dǎo)航點擊事件
  handleClick = (e) => {
    console.log(e);
  }
  //按鈕點擊事件
  btn1 = () => {
    this.setState({
      modalVisible: true
    })
  }
  //對話框取消事件
  modalCancel = () => {
    this.setState({
      modalVisible: false,
    })
  }
  //對話框內(nèi)確認事件
  handleOk = () => {
    this.setState({
      modalVisible: false,
    })
  }

  render() {
    const {panes} = this.state
    return (
      <Menu
        onClick={this.handleClick}
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
        className={'oneLevelCatalog'}
      >
        <SubMenu key="sub1" className={'twoLevelCatalog'} title={
          <span>
            <span className={'twoLevelCatalogName'}>所有套餐</span>
            <Button onClick={this.btn1}><Icon type="plus" /></Button>
          </span>
        }
        >
          {panes.length > 0 ? panes.map(item => {
            if (item.hierarchyOrContent === 'hierarchy') {
              return (
                <SubMenu key={item.index} title={
                  <span>
                    {item.title}
                    <Button onClick={this.btn1}><Icon type="plus" /></Button>
                    <Button onClick={this.btn1}><Icon type="delete" /></Button>
                  </span>
                } className={'twoLevelCatalog'}>
                  {item.content.length > 0 ? item.content.map(item => {
                    return (
                      <Menu.Item key={item.index} className={'threeLevelCatalog'}>
                        {item.title}
                        <Button onClick={this.btn1}><Icon type="delete" /></Button>
                      </Menu.Item>
                    )
                  }) : null}
                </SubMenu>
              )
            } else if (item.hierarchyOrContent === 'content') {
              return (
                <Menu.Item key={item.index} className={'threeLevelCatalog'}>
                  {item.title}
                  <Button onClick={this.btn1}><Icon type="delete" /></Button>
                </Menu.Item>
              )
            }
          }) : null}
        </SubMenu>


        <Modal
          visible={this.state.modalVisible}
          title={"添加套餐"}
          onCancel={this.modalCancel}
          onOk={this.handleOk}
        >
          <p>對話框</p>
        </Modal>
      </Menu>
    )
  }
}

export default LeisurePriceStock

這個是效果

我想在點擊加號時候添加新的二級導(dǎo)航 這個我自己可以實現(xiàn) 但是在點擊加號或者垃圾桶刪除的時候這條導(dǎo)航就會收起來 我應(yīng)該怎么做才可以讓我點擊加號或者垃圾桶時導(dǎo)航不收回去 在官網(wǎng)也沒有找到 求大佬幫我看看