javascript - 无法将 onClick / 事件侦听器添加到 MaterialUI 中的 ListItem

Question

我目前无法ListItem在 MaterialUI 中添加一个简单的事件监听器，并且它没有被听到。任何想法为什么会这样？

重现步骤

使用最新的核心版本 (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

标签： javascriptreactjsmaterial-ui

Answer 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>
  );
}