如何在 REACT.JS 中单击时隐藏可折叠的 Bootstrap 导航栏？

Question

我使用 Bootstrap 5 创建了这个可折叠的导航栏，效果很好，但我希望它在用户单击链接时关闭。 有什么办法可以在反应中做到这一点？ 谢谢

React.JS 导航栏：

                <nav className="navbar navbar-expand-lg navbar-light bg-light mb-4">
                    <div className="container">
                        <Link className='rubik navbar-brand fs-3' to='/'>Rick & Morty <span className='text-primary'>Wiki</span></Link>

                        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">

                            <style jsx="true">
                                {`
                                    button[aria-expanded="false"] > .close{
                                        display: none;
                                    }
                        
                                    button[aria-expanded="true"] > .open{
                                        display: none;
                                    }
                                    .navbar-toggler{
                                        border: none;
                                        font-size: 30px
                                    }
                                    .navbar-toggler:focus {
                                        text-decoration: none;
                                        outline: 0;
                                        box-shadow: none;
                                    }
                                `}
                            </style>

                            <i className="fas fa-bars open fw-bold text-dark"></i>
                            <i className="fas fa-times close fw-bold text-dark"></i>
                        </button>

                        <div className="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
                            <div className="navbar-nav text-center fs-5">
                                <NavLink activeclassname="active" className="nav-link" to="/">Characters</NavLink>
                                <NavLink className="nav-link" to="/episodes">Episodes</NavLink>
                                <NavLink className="nav-link" to="/location">Location</NavLink>
                            </div>
                        </div>
                    </div>
                </nav>

Answer 1

工作示例！ 你可以用反应状态来做

const [toggle, setToggle] = useState(false);


<button className="navbar-toggler" type="button" onClick={()=> setToggle(!toggle)}>
  <span className="navbar-toggler-icon"></span>
</button>