Material UI Menu组件点击事件处理问题：无法获取菜单项文本

问题原因 #

你当前的写法存在两个核心问题：

• event.target 不一定指向 <MenuItemMUI> 元素，可能是其内部的文本节点或子组件，这些元素没有 name 属性，所以 event.target.name 输出为空。
• 你没有给 <MenuItemMUI> 设置 name 属性，即便 event.target 指向它，也拿不到对应值。

方案一：直接给每个MenuItem绑定点击事件（推荐） #

把点击事件绑定到单个菜单项上，直接传入需要的文本或数据，无需依赖事件对象，逻辑更清晰可靠：

修改Menu内的MenuItem渲染代码：

{ items.map(item => (
  <MenuItemMUI 
    key={item.id} 
    onClick={() => handleMenuItemClick(item.name)}
  >
    {item.name}
  </MenuItemMUI>
))}

然后修改处理函数：

const handleMenuItemClick = (menuText: string) => {
  setAnchorEl(null);
  console.log(menuText); // 直接拿到"Logout/My Profile"这类文本
  // 这里写跳转逻辑，比如根据menuText判断跳转到对应页面
};

方案二：利用MenuItem的value属性（保留Menu上的onClick场景） #

给每个MenuItem设置value属性，然后通过事件对象找到对应的MenuItem元素获取值：

修改MenuItem代码：

{ items.map(item => (
  <MenuItemMUI 
    key={item.id} 
    value={item.name}
  >
    {item.name}
  </MenuItemMUI>
))}

修改handleClick函数：

const handleClick = (event: React.MouseEvent) => {
  setAnchorEl(null);
  // 找到触发点击的MenuItem元素
  const menuItem = event.target.closest('[role="menuitem"]') as HTMLElement;
  if (menuItem) {
    const menuText = menuItem.getAttribute('value');
    console.log(menuText);
    // 跳转逻辑
  }
};

也可以直接获取文本内容（注意去除多余空格）：

const handleClick = (event: React.MouseEvent) => {
  setAnchorEl(null);
  const menuText = event.target.textContent?.trim();
  console.log(menuText);
};

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