React中使用Material UI的Menu与MenuItem点击时如何获取子项名称

你有两种常用的实现方式，都可以稳定拿到点击的菜单项名称： #

方案1：直接传递参数（最简便） #

在渲染MenuItem绑定点击事件时，直接把当前遍历的option作为参数传给addMap函数即可：

1. 修改MenuItem的onClick绑定逻辑

{options.map((option) => (
  <MenuItem key={option} selected={option==="ONE"} onClick={() => addMap(option)}>
    {option}
  </MenuItem>
))}

2. 修改addMap函数接收参数

const addMap = (selectedOption) => {
  console.log(selectedOption) // 直接打印点击的菜单项名称
  handleClose();
};

方案2：通过自定义data属性从事件对象取值 #

你之前拿不到dataset里的值，是因为没有给MenuItem手动绑定对应的自定义属性，修改如下：

1. 给MenuItem添加data-value属性绑定当前option

{options.map((option) => (
  <MenuItem 
    key={option} 
    selected={option==="ONE"} 
    data-value={option}
    onClick={addMap}
  >
    {option}
  </MenuItem>
))}

2. 从事件对象的dataset中取值

const addMap = (event) => {
  console.log(event.currentTarget.dataset.value) // 打印点击的菜单项名称
  handleClose();
};

注意：你当前代码缺少MoreVert图标的导入，需要补充一行导入语句：

import MoreVert from '@material-ui/icons/MoreVert';

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