Как определить, какая иконка нажата в меню с иконками Material-UI - PullRequest
Новая
       17

Как определить, какая иконка нажата в меню с иконками Material-UI

1 голос
/ 10 июля 2019

При нажатии на значок в меню 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" ...

Есть ли лучший способ определить, по какой иконке был нажат?

1 Ответ

2 голосов
/ 10 июля 2019

Как я уже говорил в комментариях, я бы сделал здесь встроенную лямбду или связанную функцию для этого.Будьте явны со своим кодом и передавайте значения, которые вы ожидаете.В долгосрочной перспективе это будет менее подвержено ошибкам :) Вы должны определить константу / enum для сопоставления, а также. 

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'
}
...