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

时间:2019-02-26 03:27:54

标签: reactjs material-ui

我有一个呈现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的最佳方法是什么,或者为什么控制台有时只记录标题?

这是我在浏览器控制台中看到的:

票证

称为

称为

投票

称为

新闻

称为

2 个答案:

答案 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”。 当前目标是诀窍。