javascript - 如何仅在reactjs中将类添加到单击的元素？

我有从api创建的动态菜单项。我正在调用类更改函数onClick，但是将类添加到所有菜单中。我需要将类添加到仅单击的元素而不是整个菜单列表中，这是我的代码。

 {menuSideBar.map(menu => (
            <ListItem
              className={SideMenuClass.join(" ")}
              onClick={this.toggleClass.bind(this)}
              button
            >
              <ListItemIcon className="sidebar_menu_icons">
                <SendIcon />
              </ListItemIcon>
              <Link className="sidebar_menu_links"  to={menu.url != "" ? "/" + menu.url : "#"}>
                <ListItemText inset primary={menu.resourceValue} />
              </Link>
            </ListItem>
          ))}

下面是功能

  toggleClass = () => {
    this.setState({ addClass: !this.state.addClass });
  };

  let SideMenuClass = ["sidebar_menu_list"];
    if (this.state.addClass) {
    SideMenuClass.push("selected_sidebar_menu");
 }

请帮助我如何将类添加到仅单击的元素？

谢谢。

最佳答案

您可以将选定项的ID保存为状态数组

{menuSideBar.map(menu => (
<Item
  className={this.state.ids.includes(menu.id) ? 'active' : ''}
  onClick={() => {
    this.setState(oldState => ({
      ids: oldState.ids.includes(menu.id) ? oldState.ids.filter(x => x !== menu.id) : [...oldState.ids, menu.id]
    }));
  }}
  button
/>
))}

示例：https://codesandbox.io/s/4wv6n31q90?fontsize=14



或者，如果您只需要选择最后一个：

{menuSideBar.map(menu => (
<Item
  className={this.state.lastClicked === menu.id ? 'active' : ''}
  onClick={() => {
    this.setState({lastClicled: menu.id});
  }}
  button
/>
))}