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保存为状态数组

['value1value2#', 'value3#', 'value4value5#', 'value6']

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

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

{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
/>
))}

Answer 2

在状态下存储菜单项ID-然后在渲染（map）中检查是否等于当前元素-相应地调整类（仅对选定的类应用类）。

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

2 个答案: