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

Question

我有一个侧边栏，显示菜单项列表。其中一些菜单项有子项，因此我有一个扩展按钮，它添加一个类，并且这些子页面通过 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

Answer 1

要实现此功能，您必须检查 setActiveElement 中当前事件的 id 是否是(再次)单击的 ID，并在本例中将其设置为 null:

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