javascript - ปัญหาในการจัดการเหตุการณ์คลิกในคอมโพเนนต์เมนูของ Material UI

ฉันได้เพิ่มคอมโพเนนต์เมนูจาก Material UI แบบนี้ -

<Menu
    open={open}
    id={id}
    onClose={handleClose}
    onClick={handleClick}
    anchorEl={anchorEl}
    transformOrigin={{ horizontal: transformOriginRight, vertical: transformOriginTop }}
    anchorOrigin={{ horizontal: anchorOriginRight, vertical: anchorOriginBottom }}
  >
    { items.map(item => (
      <MenuItemMUI key={item.id}>{item.name}</MenuItemMUI>
    ))}

  </Menu>

และ clickHandler ของฉันเป็นแบบนี้ -

const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(null);
    console.log(event.target.name);
  };

ภาพหน้าจอของสิ่งที่ได้ทำแล้ว -

ฉันกำลังพยายามที่จะเข้าถึง Logout/โปรไฟล์ของฉันใน handleClick เพื่อที่ฉันจะได้นำทางไปยังหน้าที่เกี่ยวข้อง แต่ไม่พบอะไรเลยในคำสั่ง console มีใครช่วยได้ไหม

คำตอบ #1

เพิ่มเมธอดคลิกไปที่ MenuItemMUI

<MenuItemMUI key={item.id} onClick={() => handleItemClick(item)}>{item.name}</MenuItemMUI>

คำตอบ #2

คุณสามารถตั้งค่าเมธอด onClick สำหรับเพียงรายการออกจากระบบเท่านั้น

แทนที่จะเป็น:

<MenuItemMUI key={item.id}>{item.name}</MenuItemMUI>

คุณสามารถเขียนได้:

<>
  {item.name === 'Logout' && (
    <MenuItemMUI key={item.id} onClick={handleLogout}>{item.name}</MenuItemMUI>
  )}
  {item.name !== 'Logout' && (
    <MenuItemMUI key={item.id}>{item.name}</MenuItemMUI>
  )}
</>

ต้องมีการกำหนด handleLogout ที่ไหนสักแห่งในขอบเขตของคอมโพเนนต์นี้