React-打开子模式并关闭汉堡菜单

Question

我需要单击汉堡菜单中的链接并关闭汉堡菜单并打开模态。 我正在使用 react-burger-menu 和 react-bootstrap/Modal。 问题是，当我点击 Activity 时，模态打开，模态菜单和侧边菜单都关闭。这是代码。 Here is a screenshot

这是侧边栏（汉堡菜单）

[Noun,Pen, Noun,Box, Noun,Note, Noun,Scale]

这是模态：

import React from 'react';
import { stack as Menu } from 'react-burger-menu';
import { isAuth, signout } from '../auth/helpers';
import "bootstrap/dist/css/bootstrap.min.css";
import MyModal from './MyModal'


//export default props => {
class Sidebar extends React.Component {

  handleStateChange (state) {
    this.setState({menuOpen: state.isOpen})  
  }
  
 
  closeSideMenu () {
    this.setState({menuOpen: false})
  }


 state = {
   showModal: false,
   menuOpen: false
  };
  showModal = e => {
 
    this.setState({
      showModal: !this.state.showModal
    });
  };

  render() {
    return (
      <Menu
        isOpen={this.state.menuOpen}
         onStateChange={(state) => this.handleStateChange(state)}
      >
        <a className="menu-item"
          onClick={e => {
           
            this.setState({ menuOpen: false });
            this.showModal(e);
          }
          
          }
          >
          Activity
      </a>
        <a className="menu-item" href="/">
          Community
      </a>
        <a className="menu-item" href="/">
          Settings
                 </a>
        <a className="menu-item" href="/">
          Learn More
                 </a>
        <a className="menu-item" onClick={signout} href="/">
          Sign out
                 </a>
        
        <MyModal onHide={this.showModal} show={this.state.showModal}></MyModal>
        
  
            
      </Menu>
    );
  };
}

export default Sidebar;