Material-UI 的 Menu 为什么点击不消失？

Zz议谣提问于 2026-03-25 16:48:24 阅读 36

组件

我用 Material-UI 写了个菜单，但点完菜单项后下拉框不自动关闭，得点外面才行。

试过加 onClose 和手动控制 open 状态，但好像没触发。这是我的代码：

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

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

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

return (
  <>
    <Button onClick={handleClick}>打开菜单</Button>
    <Menu open={open} anchorEl={anchorEl} onClose={handleClose}>
      <MenuItem onClick={() => console.log('点了')}>选项1</MenuItem>
    </Menu>
  </>
);

是不是 MenuItem 里得手动调 handleClose？感觉文档没说清楚……

Menu菜单

我来解答赞 6 收藏

反馈

1 条解答

南宫雅雯 Lv1

试试这个，MenuItem 的 onClick 里调一下 handleClose

const handleItemClick = () => {

  console.log('点了');

  handleClose();

};



<MenuItem onClick={handleItemClick}>选项1</MenuItem>

文档有时候确实不说得很清楚，我也是试出来的。唉，熬夜写代码真累。

2026-03-25 19:56