我有一个呈现MenuBar组件的App组件。在该菜单栏中,我渲染ListItems(来自material-ui),并将以下内容作为道具传递:
onClick = (e) => {
const id = e.target.id;
console.log(id);
console.log('called');
}
MenuBar组件:
render() {
const onClick = this.props.onClick;
const titles = ["Home", "About", "Docket", "Polls", "News"];
const listItems = titles.map(title =>
<ListItem button id={title} onClick={onClick} key={title}>
<ListItemText primary={title} />
</ListItem>);
return (
<List
component="ul"
className="menu-bar">
{listItems}
</List>
);
}
我想使用此标题,尝试从事件中检索该标题,以便可以根据选择的ListItem呈现Home组件或About组件等。但是,当我运行它并在浏览器中随机单击某些ListItem时,标题有时仅被登录到控制台(看似随机)。对我来说,访问选择哪个ListItem的最佳方法是什么,或者为什么控制台有时只记录标题?
这是我在浏览器控制台中看到的:
票证
称为
称为
投票
称为
新闻
称为
答案 0 :(得分:0)
之所以不能始终得到id
是因为触发click事件的html元素并不总是您所想的。请参见this sandbox作为示例。当您单击任何ListItem
时,有时会得到(如果根据我的试验,如果单击字母所在的左侧):
<div class="MuiButtonBase-root-1883 MuiListItem-root-1871 MuiListItem-default-1874 MuiListItem-gutters-1879 MuiListItem-button-1880" tabindex="0" role="button" id="a">...</div>
存在id
的位置。但有时您会得到:
<span class="MuiTypography-root-1892 MuiTypography-subheading-1899 MuiListItemText-primary-1889">a</span>
缺少id
的地方。
对此的一种解决方案是将title
直接传递给onClick
函数:
<ListItem button id={title} onClick={() => onClick(title)}>
...
</ListItem>
相应地,onClick
函数应进行如下更新:
onClick = (title) => {
console.log(title);
console.log('called');
}
答案 1 :(得分:0)
当前Target 对我有用。 (而不仅仅是目标)
我在其他地方读到过 MUI 可能会导致意外行为。与 Claire Lin 所说的类似,在 Material UI 列表中(对我来说,它也嵌套在 MUI Drawer 中),当单击按钮时,实际目标与我预期的不同。我找到的解决方案是使用以下内容:
尝试 e.currentTarget.getAttribute('value') ,其中“value”是放置在 ListItem 上的数据。 这是我添加它的方式。查看正在分配的“值”,然后在 onClick 下方记录。 (...我试图删除大部分额外的代码,但那里仍然有一些多余的代码,只是因为它提供了上下文。)
return (
//removed extra code for brevity
<Drawer
anchor={'left'}
open={drawerOpen}
onClose={toggleDrawerOpen(false)}
>
<List>
{itemsList.map((item, index) => {
const { text, icon, id } = item
return (
<ListItem
button
key={id}
value={index} // <<<< HERE!!!
onClick={(e) => {
console.log(e.currentTarget.getAttribute('value')) // <<<< HERE!!!
setDrawerOpen(false)
}}
>
{icon && <ListItemIcon>{icon}</ListItemIcon>}
<ListItemText primary={text} />
</ListItem>
)
})}
</List>
</Drawer>
...再一次,我使用了“value”并将其指定为“index”。 当前目标是诀窍。