如何确定在带有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

就像我在评论中说的那样，我将在此处创建内联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'
}