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

我有一个呈现菜单栏组件的应用程序组件。在该菜单栏中，我呈现ListItems（从材质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>
    );
}

render（）{
const onClick=this.props.onClick；
const titles=[“主页”、“关于”、“摘要”、“民意测验”、“新闻”]；
const listItems=titles.map（title=>
);
返回(
{listItems}
);
}

我想使用这个标题，我尝试从事件中检索它，这样我就可以根据选择的ListItem呈现主组件或关于组件等。但是，当我运行此程序并随机单击浏览器中的某些列表项时，标题有时只会记录到控制台（似乎是随机的）。对我来说，访问所选ListItem的最佳方式是什么，或者为什么控制台有时只记录标题

以下是我在浏览器控制台中得到的信息：

案卷

叫

叫

民意测验

叫

新闻

---

调用

之所以不能始终获得

id

，是因为触发单击事件的html元素并不总是您所想的。请看一个例子。当你点击任何一个

列表项

，有时你会得到（根据我的试验，如果你点击字母所在位置的左侧）：

缺少

id

解决方法是将

title

直接传递给

onClick

函数：

 <ListItem button id={title} onClick={() => onClick(title)}>
     ...
 </ListItem>

当前目标是我成功的原因。（而不仅仅是目标）

我在别处读到过，可能是MUI导致了意想不到的行为。与Claire Lin所说的类似，在Material UI列表中（对我来说，它也嵌套在MUI抽屉中），当单击按钮时，实际目标与我预期的不同。我找到的解决方案是使用以下方法：

请尝试e.currentTarget.getAttribute（'value'），其中“value”是放置在列表项上的数据。 下面是我如何添加它的。请参阅分配的“值”，然后在下面的onClick中记录。（…我试图删除大部分多余的代码，但其中仍有一些多余的代码，只是它提供了上下文。）

返回(
//为了简洁起见，删除了额外的代码
{itemsList.map（（项，索引）=>{
常量{text，icon，id}=item
返回(
你在寻找这样的解决方案吗？可能是@Jayavel的解决方案的副本worked@Stevie很高兴它有帮助！我可以将此作为答案发布吗？请接受它，如果它有助于您的解决方案解决问题，请进行投票。对于其他人，当您使用此解决方案时，您应该在处理程序函数中记录事件e，而不是e.target.id返回的事件仅仅是您传递给OnCase= {（）= OnCutter（title）}的标题，Stevie，我已经更新了这个帖子，将更改包含到处理函数中。谢谢指点。@如果这已经解决了您的问题，请考虑通过点击复选标记来接受它。谢谢！
<span class="MuiTypography-root-1892 MuiTypography-subheading-1899 MuiListItemText-primary-1889">a</span>

 <ListItem button id={title} onClick={() => onClick(title)}>
     ...
 </ListItem>

onClick = (title) => {
    console.log(title);
    console.log('called');
}

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>