Material-UI 的 Menu 菜单点击后不关闭怎么办？

Des.玉飞提问于 2026-03-08 22:42:22 阅读 6

组件

我用 Material-UI 写了个下拉菜单，点击菜单项之后菜单不会自动关闭，得点外面才行，这体验太差了。

我试过在 MenuItem 的 onClick 里手动调用 setAnchorEl(null)，但有时候还是关不掉，特别是用了 React.memo 包裹组件之后。是不是哪里漏了？

const handleClick = (event) => {
  setAnchorEl(event.currentTarget);
};

const handleClose = () => {
  setAnchorEl(null);
};

return (
  <>
    <Button onClick={handleClick}>打开菜单</Button>
    <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
      <MenuItem onClick={handleClose}>选项1</MenuItem>
      <MenuItem onClick={handleClose}>选项2</MenuItem>
    </Menu>
  </>
);

Menu菜单

我来解答赞 6 收藏

反馈

1 条解答

西门莉娜 Lv1

你这问题我遇到过，Material-UI的Menu确实有点小坑。关键点在于你需要在点击MenuItem后同时触发handleClose和MenuItem自己的点击逻辑。

试试这个优化方案：

const handleItemClick = (callback) => () => {

  handleClose();

  callback?.();

};



// 使用例子

<Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>

  <MenuItem onClick={handleItemClick(() => console.log('选项1被点击'))}>

    选项1

  </MenuItem>

</Menu>

这样改有几个好处：
1. 把关闭逻辑和业务逻辑解耦了
2. 确保每次点击都会先关闭菜单
3. 不会因为React.memo之类的优化导致关闭失效

如果MenuItem有独立的点击处理逻辑，就把逻辑函数传给handleItemClick。我用这招解决了不少莫名其妙的菜单关闭问题，MUI的组件有时候确实需要点workaround。

2026-03-08 23:00