Question

我根据the material UI site上给出的示例创建了一个带有菜单的AppBar，它可以在一个菜单中正常工作。但是当我尝试添加第二个下拉菜单时，点击任一图标，我会看到同一组MenuItems，如图所示。

Here is the list of menu items that are showing up when either icon is clicked

$(".bowl").on('mousedown', function ( event ) {
        var $stone = $('<div class="stone"></div>').css({
            left: event.pageX - 25,
            top: event.pageY - 25,
            position: "absolute"
        });
        $(this).parent().append($stone);
        $stone.draggable();
    });

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

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;

如果使用React在material-ui Appbar上存在多个菜单时如何分配哪些MenuItem打开onClick？

1 个答案: