如何确定在具有 Material-UI 图标的菜单中单击了哪个图标

Question

点击material-ui菜单中的图标时，event.target不提供值来确定点击了哪个图标

这是我的代码：

<ListItem button id="Dashboard" onClick={handleMenuListClick}>
  <ListItemIcon>
    <DashboardIcon />
  </ListItemIcon>
  <ListItemText primary="Dashboard" />
</ListItem>

单击按钮文本区域（即“仪表板”）时，我能够读取 event.target 值以确定单击了哪个菜单列表项。单击 DashboardIcon 时，会触发处理程序，但 event.target 会生成 svg（例如 svg class="MuiSvgIcon-root"...

有没有更好的方法来确定点击了哪个图标？

Answer 1

就像我在 cmets 中所说的那样，我会在这里创建一个内联 lambda 或绑定函数来执行此操作。明确您的代码并传递您期望的值。从长远来看，它会更不容易出错:) 你应该定义一个常量/枚举来映射。

const Pages = {
  dashboard: 'Dashboard',
  profile: 'Profile'
}

然后渲染它

<ListItem
  button
  id={Pages.dashboard}
  onClick={() => handleMenuListClick(Pages.dashboard)}
>
  <ListItemIcon>
    <DashboardIcon />
  </ListItemIcon>
  <ListItemText primary="Dashboard" />
</ListItem>

在 Typescript 中你可以定义枚举 ?

enum Pages {
  dashboard = 'dashboard',
  profile = 'profile'
}