如何通过单击 React 仅将活动类添加到下一个元素？答案

【问题标题】：How to add active class only to the next element by click in React?如何通过单击 React 仅将活动类添加到下一个元素？
【发布时间】：2021-05-29 08:04:39
【问题描述】：

我是 React 新手。我正在创建一个自定义菜单栏。对于移动菜单，我有 2 个下拉子菜单。我想通过单击箭头来切换子项。它已经在工作，但是当我单击两个箭头中的任何一个时，两个子项都会打开。我只想打开下一个子项并关闭其他子项（如果它们已经打开）。看我的截图

这里是我的代码：

class Header extends Component {

state = {
    mobileNav: false,
    submenuToggle: false
};

toggleMobileNav = () => {
    this.setState({mobileNav: !this.state.mobileNav});
};

submenuToggle = () => {
    this.setState({submenuToggle: !this.state.submenuToggle});
}
render() {  
let navClass = ["justify-content-center mainMenu"];
if(this.state.mobileNav) {
    navClass.push('showMobileNav');
}

let subMenuClass = ["subMenu"];
let submenuToggleClass = ["submenuToggle"]
if(this.state.submenuToggle) {
    subMenuClass.push('showSubMenu');
    submenuToggleClass.push("opened");
}

return (
    <header className="header-area">
        <Container>
            <Row>
                <Col>
                    <Navbar bg="light" expand="lg">
                        <ul className={navClass.join(' ')}>
                            <li>
                                <NavLink exact className="nav-link" activeClassName="activeNav" to="/">Home</NavLink>
                            </li>
                            <li className="hasSubmenu">
                                <NavLink exact className="nav-link" activeClassName="activeNav" to="/about-us">About us</NavLink>
                                <span className={submenuToggleClass.join(' ')} onClick={this.submenuToggle}></span>
                                <div className={subMenuClass.join(' ')}>
                                    <NavLink exact activeClassName="activeNav" to="/corporate-responsibility">Corporate Responsibility</NavLink>
                                    <NavLink exact activeClassName="activeNav" to="/technical-achievements">Technical Achievements</NavLink>
                                </div>
                            </li>
                            <li className="hasSubmenu">
                                <NavLink exact className="nav-link" activeClassName="activeNav" to="/products">Products</NavLink>
                                <span className={submenuToggleClass.join(' ')} onClick={this.submenuToggle}></span>
                                <div className={subMenuClass.join(' ')}>
                                    <NavLink exact activeClassName="activeNav" to="/classic-heat-transfer-papers">Classic Heat Transfer papers</NavLink>
                                    <NavLink exact activeClassName="activeNav" to="/novelty-transfer-papers">Novelty Transfer papers</NavLink>
                                </div>
                            </li>
                            <li>
                                <NavLink exact className="nav-link" activeClassName="activeNav" to="/services">Services & Capabilities</NavLink>
                            </li>                                
                        </ul>
                    </Navbar>
                </Col>
            </Row>
        </Container>
    </header>
  )
}
}
export default Header;

请帮助我。谢谢！

【问题讨论】：

标签： javascript jquery reactjs navbar

【解决方案1】：

为每个菜单项设置一个 ID 并将其设置为您的状态，这样无论何时单击菜单项，您都会了解该项目并打开该特定项目并关闭其余项目。

在状态中添加另一个键

active_menu_id : 0


submenuToggle = (e) => {
    this.setState({
         active_menu_id : e.target.id,
         your other stuff
    });
}

在渲染方法中，只需检查 active_menu id 并根据它展开选项卡

【讨论】：

【解决方案2】：

在您的情况下，只有两个下拉菜单选项，您可以拥有 2 个不同的状态挂钩。如果用户单击一个箭头，则状态更改为 true (setIsAboutUs(true))。如果状态为真，则菜单打开。

【讨论】：