Question

当我尝试多次放置菜单组件时，我得到了错误的弹出列表。我在下面的codeandbox链接上显示了我的问题。我将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>

我希望显示正确的弹出列表。当我单击左键时，data-id应为“ 1”，并应按“ 2”键实际上，当我单击列表1时，我得到“ 2”

Answer 1

我猜想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

如何解决材料UI

1 个答案: