如何在已经打开的菜单的背景下打开菜单

Question

MenuButton负责基本菜单功能。

AccountsMenu使用MenuButton呈现菜单。

AppsMenu使用MenuButton呈现另一个菜单。

AccountsMenu和AppsMenu都在AppBar中。假设我打开了AppsMenu。是否可以通过直接单击AccountsMenu来关闭AppsMenu？我试图避免先单击以关闭AppsMenu，然后再打开AccountsMenu。

import React from 'react';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import IconButton from '@material-ui/core/IconButton';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({

  popoverMenuIcon: {
    position: 'relative',
    marginLeft: -10
  }

})

class MenuButton extends React.Component {
  state = {
    anchorEl: null,
  };

  handleOpen = event => {
    this.setState({
      anchorEl: event.currentTarget,
    });
  };

  handleClose = () => {
    this.setState({ anchorEl: null });
  };

  render() {
    const { classes } = this.props;
    const { anchorEl } = this.state;
    const open = Boolean(anchorEl);
    const Wrapper = this.props.iconType;
    const listItems = this.props.items.map((menuItem) => (
      <MenuItem onClick={this.handleClose} >
        <IconButton color="inherit" className={classes.popoverMenuIcon}>
          {<menuItem.icon />}
        </IconButton>
        <p>{menuItem.menuDescription}</p>
      </MenuItem>

    ));

    return (
      <div>
        <IconButton
          aria-owns={open ? 'menu-appbar' : null}
          aria-haspopup="true"
          onClick={this.handleOpen}
          color="contrast"
        >
          {<Wrapper />}
        </IconButton>
        <Menu
          id="menu-appbar"
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'right',
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
          open={open}
          onClose={this.handleClose}
          getContentAnchorEl={null}
        >
          {listItems}


        </Menu>
      </div>
    );
  }

}

export default withStyles(styles)(MenuButton);


import React, { Component } from 'react'
import MenuButton from './MenuButton'
import { withStyles } from '@material-ui/core/styles'
import AccountCircle from '@material-ui/icons/AccountCircle';
import Input from '@material-ui/icons/Input';

const styles = theme => ({

    accountCircle: {
        position: 'absolute',
        right: 20,
        fontSize: 30
    },


})
export class AccountMenu extends Component {

    render() {
        const { classes } = this.props;
        return (
            <div className={classes.accountCircle} >
                <MenuButton iconType={AccountCircle} 
                    items={[
                        {menuDescription: "Sign Out", icon: Input },
                        {menuDescription: "Test", icon: Input }
                    ]} 
                />
            </div>

        )
    }
}

export default withStyles(styles)(AccountMenu);


import { withStyles } from '@material-ui/core/styles';
import Apps from '@material-ui/icons/Apps';
import React, { Component } from 'react';


const styles = theme => ({

    apps: {
        position: 'absolute',
        right: 80,
        fontSize: 30
      },
})
export class AppsMenu extends Component {

    render() {
        const { classes } = this.props;
        return (
            <div className={classes.apps} >
            <MenuButton iconType={Apps} 
                items={[
                    {menuDescription: "Self-Service", icon: Input },
                    {menuDescription: "Test", icon: Input }
                ]} 
            />
        </div>
        )
    }
}

export default withStyles(styles)(AppsMenu);