无法将 onClick / 事件侦听器添加到 Material UI 中的列表项答案

【问题标题】：Unable to Add onClick / Event Listener to a ListItem in MaterialUI无法将 onClick / 事件侦听器添加到 Material UI 中的列表项
【发布时间】：2020-04-15 19:29:01
【问题描述】：

我目前无法在 MaterialUI 中向 ListItem 添加简单的事件侦听器，并且无法听到。任何想法为什么会这样？ ????

复制步骤？？？？

使用最新的核心版本 (4.9.10)，使用 .map() 方法构建一个简单的列表：

<List dense={true}>
 {
   types.map(({ icon, primary, secondary }) => (
     <ListItem key={primary} onClick={() => console.log(primary)}>
       <ListItemIcon>
         { icon }
       </ListItemIcon>
       <ListItemText
         primary={primary}
         secondary={secondary}
       />
   </ListItem>
   ))
 }
 </List>

环境？？？？？？

Material-UI v4.9.10
反应 v16.12.0

【问题讨论】：

父母是否有像this question这样的指针事件“无”？
我这里测试：codesandbox.io/s/material-demo-oi3bu，没有问题。谁分享你的types？

标签： javascript reactjs material-ui

【解决方案1】：

此代码为我运行：

import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemIcon from '@material-ui/core/ListItemIcon';


export default function DemoList() {
  const types=[{
    icon: 'icon',
    primary:'primaryText',
    secondary:'secondaryText'
  }]

  return (
    <List dense={true}>
 {
   types.map(({ icon, primary, secondary }) => (
     <ListItem key={primary} onClick={() => {console.log(primary)}}>
       <ListItemIcon>
         { icon }
       </ListItemIcon>
       <ListItemText
         primary={primary}
         secondary={secondary}
       />
   </ListItem>
   ))
 }
 </List>
  );
}

【讨论】：