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

Question

我有从 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");
 }

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

谢谢。

Answer 1

您可以将所选项目的 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
/>
))}