当使用React在Material-UI应用程序栏上存在多个菜单时，如何分配哪个菜单项打开onClick？

Question

我根据材料UI网站上给出的示例创建了一个带有菜单的AppBar，它可以与一个菜单一起正常工作。但是，当我尝试添加第二个下拉菜单时，在单击任一图标时，都会显示相同的MenuItems集，如图所示。

这是单击任一图标时显示的菜单项列表

import React, { Component } from 'react';

// Material UI Imports
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import Tooltip from 'material-ui/Tooltip';
import Menu, { MenuItem } from 'material-ui/Menu';

import PeopleIcon from 'material-ui-icons/People';
import ViewListIcon from 'material-ui-icons/ViewList';
import CompareArrowsIcon from 'material-ui-icons/CompareArrows';

const styles = {
  root: {
    width: '100%',
  },
  flex: {
    flex: 1,
  },
  menuItem: {
    paddingLeft: '10px'
  }
}

class Header extends Component {
  constructor(props) {
    super(props);

    this.state = { anchorEl: null };
  }

  handleMenu = event => {
    console.log(event.currentTarget);
    this.setState({ anchorEl: event.currentTarget });
  }

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

  render() {
    const { classes } = this.props;
    const { anchorEl } = this.state;
    const open = Boolean(anchorEl);

    return(
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <Typography type="title" color="inherit" className={classes.flex}>
              New Faces
            </Typography>

            {/* Menu Item One */}
            <div>
              <Tooltip title="Lists" className={classes.menuItem}>
                <IconButton
                  color="inherit"
                  aria-owns={open ? 'menu-list' : null}
                  aria-haspopup="true"
                  onClick={this.handleMenu}
                >
                  <ViewListIcon />
                </IconButton>
              </Tooltip>

              <Menu
                id="menu-list"
                anchorEl={anchorEl}
                anchorOrigin={{
                  vertical: 'top',
                  horizontal:'right',
                }}
                transformOrigin={{
                  vertical: 'top',
                  horizontal:'right',
                }}
                open={open}
                onClose={this.handleClose}
              >
                <MenuItem onClick={this.handleClose}>Create List</MenuItem>
                <MenuItem onClick={this.handleClose}>List 1</MenuItem>
                <MenuItem onClick={this.handleClose}>List 2</MenuItem>
              </Menu>
            </div>

            {/* Menu Item Two */}
            <div>
              <Tooltip title="User Management" className={classes.menuItem}>
                <IconButton
                  color="inherit"
                  aria-owns={open ? 'menu-appbar' : null}
                  aria-haspopup="true"
                  onClick={this.handleMenu}
                >
                  <PeopleIcon />
                </IconButton>
              </Tooltip>

              <Menu
                id="menu-appbar"
                anchorEl={anchorEl}
                anchorOrigin={{
                  vertical: 'top',
                  horizontal:'right',
                }}
                transformOrigin={{
                  vertical: 'top',
                  horizontal:'right',
                }}
                open={open}
                onClose={this.handleClose}
              >
                <MenuItem onClick={this.handleClose}>Profile</MenuItem>
                <MenuItem onClick={this.handleClose}>User Management</MenuItem>
                <MenuItem onClick={this.handleClose}>Logout</MenuItem>
              </Menu>
            </div>
          </Toolbar>
        </AppBar>
      </div>
    );
  }
}

export default withStyles(styles)(Header);

如何根据单击的图标分配显示哪些MenuItem？我假设它应该显示直接位于所选anchorEl下的MenuItems。任何帮助将非常感激！

Answer 1

检查这个工作解决方案https://codesandbox.io/s/84xl2v8wm2我掀起了

我所做的是将公共代码提取到一个单独的组件中，我们称之为 MenuButton 并在多个地方使用它。这样每个菜单按钮都有自己的作用域、自己的事件处理程序等。目前，问题是您对两个不同的元素使用相同的事件处理程序，并使用相同的变量来跟踪菜单的状态。要么使用两个变量，如 open 和 open1，要么像我所做的那样将代码提取到一个单独的组件中。

父文件

<MenuButton iconType={AccountCircle} items={['Create','List1', 'List2']}/>
<MenuButton iconType={MenuIcon} items={['Profile','User Management', 'Logout']}/>

menuButton.js 文件

import React from 'react';
import AccountCircle from 'material-ui-icons/AccountCircle';
import Menu, { MenuItem } from 'material-ui/Menu';
import IconButton from 'material-ui/IconButton';
import { withStyles } from 'material-ui/styles';

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

  handleChange = (event, checked) => {
    this.setState({ auth: checked });
  };

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

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

  render() {
    const { classes } = this.props;
    const { auth, anchorEl } = this.state;
    const open = Boolean(anchorEl);
    const Wrapper = this.props.iconType;
    const listItems = this.props.items.map((link) =>
      <MenuItem onClick={this.handleClose} >{link}</MenuItem>
    );

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


        </Menu>
      </div>
    );
  }

}

export default MenuButton;