antdesgin 的导航菜单组件Menu 我想让他点击时候不关闭应该怎么弄

Question

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',
        }
      ]
    }
  }

  //导航点击事件
  handleClick = (e) => {
    console.log(e);
  }
  //按钮点击事件
  btn1 = () => {
    this.setState({
      modalVisible: true
    })
  }
  //对话框取消事件
  modalCancel = () => {
    this.setState({
      modalVisible: false,
    })
  }
  //对话框内确认事件
  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

这个是效果

我想在点击加号时候添加新的二级导航 这个我自己可以实现 但是在点击加号或者垃圾桶删除的时候这条导航就会收起来 我应该怎么做才可以让我点击加号或者垃圾桶时导航不收回去 在官网也没有找到 求大佬帮我看看

Answer 1

点击加号或者垃圾桶对应的click事件 阻止冒泡e.stopPropagation()