时间戳

首页 > 解决方案 > 如何解决 Material ui 中的多个菜单项的问题

reactjs - 如何解决 Material ui 中的多个菜单项的问题

问题描述

当我尝试多次放置菜单组件时，我得到错误的弹出列表。我在下面的代码框链接上显示了我的问题。我把 data-id 属性显示在 chromedev 中是 popu 列表是正确的。

https://wt7jy.csb.app/

     <Button
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose} data-id="1">
          Profile
        </MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>

      <Button
        aria-controls="simple-menu2"
        aria-haspopup="true"
        onClick={handleClick}
      >
        Open Menu
      </Button>
      <Menu
        id="simple-menu2"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose} data-id="2">
          Profile
        </MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>

我希望显示正确的弹出列表。当我单击左侧数据 ID 应为“1”时，右侧应为“2”实际上当我单击列表 1 时，我得到“2”

标签： reactjstypescriptmaterial-ui

解决方案

我猜anchorEl第二个的问题Menu。它应该是

      <Button
        aria-controls="simple-menu2"
        aria-haspopup="true"
        onClick={handleClick} // Here you have to set target to `anchorEl2`
      >
        Open Menu
      </Button>
       <Menu
        id="simple-menu2"
        anchorEl={anchorEl2}
        keepMounted
        open={Boolean(anchorEl2)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose} data-id="2">
          Profile
        </MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>

这是给你的工作演示。 https://stackblitz.com/edit/react-material-menu-jnnxnc

推荐阅读