Material-UI Menu 组件只有最后一个 MenuItem onClick 动作被触发答案

【问题标题】：Material-UI Menu component only last MenuItem onClick action is triggeredMaterial-UI Menu 组件只有最后一个 MenuItem onClick 动作被触发
【发布时间】：2019-09-21 16:04:52
【问题描述】：

最近我尝试使用 MaterialUI(4.3.3) 的 Menu 和 MenuItem 组件实现一个简单的下拉菜单。

MenuItem 上的 onclick 事件行为不正确。当console.log(id) 被调用时，每个组件都在回显样本数组中的最后一个元素。我切换到ListItem，问题消失了。


const Test = () => {
    const [anchorEl, setAnchorEl] = React.useState(null);
    const sampleArray = ["test1", "test2", "test3"];
    const open = Boolean(anchorEl);

    return (
        sampleArray.map(id => {
            let curID = id;
            return (<>
                <IconButton
                    aria-label="more"
                    aria-controls="long-menu"
                    aria-haspopup="true"
                    onClick={event => setAnchorEl(event.currentTarget)}
                >
                    <MoreHorizIcon />
                </IconButton>
                <Menu
                    elevation={0}
                    id="long-menu"
                    anchorEl={anchorEl}
                    keepMounted
                    open={open}
                    transformOrigin={{
                        vertical: 'top',
                        horizontal: 'center',
                    }}
                    onClose={() => setAnchorEl(null)}
                >
                    <MenuItem onClick={() => {
                        setAnchorEl(null);
                        console.log(curID); // should be each individual id, but here always "test3"
                    }}>Test</MenuItem>
                </Menu>
            </>);
        })
    )
}

这是菜单的期望行为吗？如何解决？

【问题讨论】：

在返回前尝试map函数添加让curId=id;并在 onclick 中使用它。
@Oleg 仍然打印最后一个元素。 :( 我将编辑添加这一行。感谢您的建议！
尝试使用地图第二个参数中的索引并通过索引对其进行访问。让 curIndex=index;
对不起，你能不能像以前一样在点击功能中而不是在返回之前推动让

标签： reactjs material-ui

【解决方案1】：

是的，这是所需的行为。这有点令人困惑：
您有单一状态 (anchorEl)，它决定 all 菜单的锚点是什么。
当您单击图标按钮时，您为所有菜单设置了相同的 AnchorEl。
所以当你打开菜单时，你实际上是在同一个地方打开了所有 3 个菜单！
您总是在控制台中获得“test3”的原因是因为带有 id test3 的菜单最后呈现并且他与其他菜单重叠。

要解决这个问题，您需要每个菜单管理自己的状态，因此每个菜单都有自己的锚点：

const IsolatedMenu = props => {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);

  return(
  <React.Fragment>
    <IconButton
    aria-label="more"
    aria-controls="long-menu"
    aria-haspopup="true"
    onClick={event => setAnchorEl(event.currentTarget)}
    >
    <PriorityHighIcon />
    </IconButton>
    <Menu
    elevation={0}
    id="long-menu"
    anchorEl={anchorEl}
    keepMounted
    open={open}
    transformOrigin={{
        vertical: 'top',
        horizontal: 'center',
    }}
    onClose={() => setAnchorEl(null)}
    >
    <MenuItem onClick={() => {
        setAnchorEl(null);
        console.log('curr id',props.id); // should be each individual id, but here always "test3"
    }}>Test</MenuItem>
    </Menu>

  </React.Fragment>
  )
}

你的测试组件应该是这样的：

const Test = () => {
  const sampleArray = ["test1", "test2", "test3"];

  return (
      sampleArray.map(id => {
          return (<>
            <IsolatedMenu  id={id}/>
          </>);
      })
  )
}

【讨论】：