从传递给 React 中按钮组件的事件处理程序获取 id？

Question

我有一个呈现 MenuBar 组件的 App 组件。在该菜单栏中，我渲染 ListItems（来自material-ui）并将以下内容作为道具传递：

    onClick = (e) => {

    const id = e.target.id;
    console.log(id);
    console.log('called');
}

菜单栏组件：

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

我想使用这个标题，我尝试从事件中检索它，以便我可以渲染 Home 组件或 About 组件等，具体取决于选择的 ListItem。但是，当我运行此命令并随机单击浏览器中的某些 ListItems 时，标题有时仅记录到控制台（看似随机）。我访问选定的 ListItem 的最佳方式是什么，或者为什么控制台有时只记录标题？

这是我在浏览器控制台中得到的内容：

案卷

被称为

被称为

民意调查

被称为

消息

被称为

Answer 1

之所以不能始终如一地得到id，是因为触发点击事件的html元素并不总是你所想的那样。请参阅此沙箱的示例。当您单击任何一个 时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');
}