MUI Menu组件anchorEl属性无效问题求助

核心问题分析 #

你的代码主要存在两个关键问题：

• anchorEl 状态未正确关联触发下拉的用户图标元素，导致初始提示anchorEl为undefined，后续即使设置状态，也因元素引用错误引发菜单定位异常。
• 未配置Menu组件的锚点定位属性，加上导航栏布局设置，使得菜单出现在左上角而非用户图标附近。

具体修复步骤 #

1. 正确绑定anchorEl状态
   在用户图标的点击事件中，直接将事件的currentTarget赋值给anchorEl，确保获取到触发点击的DOM元素实例：

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

   关闭菜单时将anchorEl设为null：

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

2. 配置Menu的定位属性
   为Menu组件设置anchorOrigin和transformOrigin，让菜单相对于用户图标右上角弹出：

   <Menu
     anchorEl={anchorEl}
     open={Boolean(anchorEl)}
     onClose={handleMenuClose}
     anchorOrigin={{
       vertical: 'top',
       horizontal: 'right',
     }}
     transformOrigin={{
       vertical: 'top',
       horizontal: 'right',
     }}
   >
     {/* 菜单选项 */}
   </Menu>
   

3. 确保触发元素在文档流中
   检查导航栏中用户图标的父元素是否设置了position: relative（MUI的AppBar默认已包含相对定位），避免触发元素脱离文档流导致锚点检测失败。若用自定义布局，可通过ref明确获取元素：

   const userIconRef = useRef(null);
   
   const handleMenuOpen = () => {
     setAnchorEl(userIconRef.current);
   };
   
   // 在用户图标组件上绑定ref
   <IconButton ref={userIconRef} onClick={handleMenuOpen}>
     <AccountCircle />
   </IconButton>
   

修复后核心代码示例 #

import { useState, useRef } from 'react';
import { AppBar, Toolbar, IconButton, Menu, MenuItem } from '@mui/material';
import AccountCircle from '@mui/icons-material/AccountCircle';

function App() {
  const [anchorEl, setAnchorEl] = useState(null);
  const userIconRef = useRef(null);

  const handleMenuOpen = () => {
    setAnchorEl(userIconRef.current);
  };

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

  return (
    <AppBar position="static">
      <Toolbar sx={{ justifyContent: 'flex-end' }}>
        <IconButton ref={userIconRef} onClick={handleMenuOpen} color="inherit">
          <AccountCircle />
        </IconButton>
        <Menu
          anchorEl={anchorEl}
          open={Boolean(anchorEl)}
          onClose={handleMenuClose}
          anchorOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
        >
          <MenuItem onClick={handleMenuClose}>个人中心</MenuItem>
          <MenuItem onClick={handleMenuClose}>设置</MenuItem>
          <MenuItem onClick={handleMenuClose}>退出登录</MenuItem>
        </Menu>
      </Toolbar>
    </AppBar>
  );
}

export default App;

额外注意事项 #

• 确保所有MUI组件版本一致，避免版本差异导致的API不兼容。
• 检查自定义样式是否覆盖了MUI组件的默认定位属性（如z-index或position），这可能导致菜单显示异常。

内容的提问来源于stack exchange，提问作者Bijitashya Birinchi