javascript - 如何使用 Material UI React 中的 Menu 和 MenuItem 获取单击时 MenuItem 的名称

Question

我正在 React 中使用 MaterialUI 中的菜单和菜单项。我想在单击菜单项时打印该菜单项的名称。

在console.log event.currentTarget中返回整个列表项:ListItem Image attached

在console.log event.currentTarget.dataset中返回DOMSTringMap 。 WRT 我发现了一个类似的问题:Get value of MenuItem material ui 但是 DOMStringMap 的输出似乎无法使用。

检查addMap函数: 我想 console.log 菜单项的名称“ONE”。

import React from 'react';
import { useState } from 'react';
import {IconButton, Menu, MenuItem } from '@material-ui/core';


 const options = [
'ONE',
'TWO',
'THREE',
];

const ITEM_HEIGHT = 48;

export default function AdvanceOptionsMenu() {
 const [anchorEl, setAnchorEl] = useState(null);
 const open = Boolean(anchorEl);
 const [mapList, setMapList] = useState([]);

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

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

 const addMap = (event) => {
  **console.log(event.currentTarget)**
  handleClose();
 };

return (
<>
<div className="advance-menu">
  <IconButton
    aria-label="more"
    aria-controls="long-menu"
    aria-haspopup="true"
    onClick={handleClick}
  >
    <MoreVert />
  </IconButton>
  <Menu
    id="long-menu"
    anchorEl={anchorEl}
    keepMounted
    open={open}
    onClose={handleClose}
    PaperProps={{
      style: {
        maxHeight: ITEM_HEIGHT * 4.5,
        width: '20ch',
      },
    }}
  >
    {options.map((option) => (
      <MenuItem key={option} selected={option==="ONE"} onClick={addMap}>
        {option}
      </MenuItem>
    ))}
  </Menu>
  </div>
  {mapList}
  </>
);
}

Answer 1

您分享的问题链接，answers 之一建议使用 event.target.innerText 来获取值。另一种方法是，您可以将值传递给 MenuItem 中的 onClick。我创建了一个demo对于这两个选项。请查看。