Estoy usando Menú y Elemento de menú de MaterialUI en React. Quiero imprimir el nombre del elemento del menú cuando hago clic en él.
En el event.currentTarget de console.log devuelve el elemento de lista completo: ListItem Imagen adjunta
En el event.currentTarget.dataset de console.log devuelve el DOMSTringMap . WRT una pregunta similar que encontré: Obtenga el valor del material de MenuItem ui Pero la salida de DOMStringMap parece inutilizable.
Verifique la función addMap: quiero consolar. registrar el nombre del elemento del menú que es "UNO".
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} </> ); }El enlace de la pregunta que compartió, una de las respuestas sugirió usar event.target.innerText para obtener el valor. Otro enfoque podría ser, puede pasar un valor a onClick en MenuItem . He creado una demostración para ambas opciones. Por favor revise.