如何通過單擊 React 僅將活動 class 添加到下一個元素？

Question

我是 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;

請幫我。 謝謝你！

Answer 1

每個菜單項都有一個 ID，並將其保存在 state 中，這樣無論何時單擊菜單項，您都會了解該項目並打開該特定項目並關閉 rest。

在 state 內添加另一個密鑰

active_menu_id : 0


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

在渲染方法中，只需檢查 active_menu id 並根據它展開選項卡

Answer 2

在您的情況下，只有兩個下拉菜單選項，您可以擁有 2 個不同的 state 掛鈎。 如果用戶單擊一個箭頭，則 state 變為 true (setIsAboutUs(true))。 如果 state 為真，則菜單打開。