时间戳

首页 > 解决方案 > 切换类添加类但不删除它

javascript - 切换类添加类但不删除它

问题描述

我有一个显示菜单项列表的侧边栏。其中一些菜单项有子项，所以我有一个展开按钮，它添加一个类，这些子页面通过 css 显示。

{
    item.childPages ? <button className = { i === this.state.activeId ? "active child-nav-control" : "child-nav-control" } onClick={() => this.setActiveElement(i)}></button> : null
}

我已经设法在每个单独的项目上添加了类，但是当我第二次单击它时，类并没有被删除。谁能看到我哪里出错了？

class Sidebar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeId: null
    }
    this.setActiveElement = this.setActiveElement.bind(this);
  }

  setActiveElement(id){
    this.setState({activeId: id});
  }

  render(props) {
    const data = this.props.nav.contentfulNavigation.navigationItem

    return (
      <Menu>
          <ul id="mainnav">
            <li><Link className="logo" to="/"><img src={logo} alt="Shell Logo" /></Link></li>
            {data.map((item, i) =>
              <li key={i} className={item.childPages ? item.title.replace(/\s+/g, '-') + ' has-child-wrap' : item.title.replace(/\s+/g, '-')}>
                <Link partiallyActive={true} className={item.childPages ? 'has-child' : null}
                      to={item.slug}
                      activeClassName={item.slug === '/' ? null : 'active'}>
                      {item.menuTitle}
                </Link>
                {item.childPages ? <button className={i === this.state.activeId ? "active child-nav-control" : "child-nav-control"} onClick={() => this.setActiveElement(i)}></button> : null}  
                {item.childPages && <Nav nav={item.childPages} />}
              </li>
            )}
          </ul>
      </Menu>
    )
  }
}

const Nav = ({ nav }) => {
    //console.log(nav)
    return (
      <ul className="children">
        {nav.map((node) => (
          <li key={node.id}>
            <Link partiallyActive={true} activeClassName="active child" to={node.slug}>{node.menuTitle}</Link>
          </li>
        ))}
      </ul>
    )
}

export default Sidebar

标签： javascriptreactjs

解决方案

要完成这项工作，您必须检查setActiveElement当前活动的 id 是否是被点击的那个（再次）并null在这种情况下设置它：

setActiveElement(id){
    this.setState(({activeId}) => ({activeId: id === activeId ? null : id}));
}

推荐阅读