无需添加 JavaScript 即可折叠菜单

Question

在 React Bootstrap 中，如何在单击任何项目时使子菜单折叠，而不使用添加的

toggle

JS 处理程序？

            <Navbar collapseOnSelect className="bg-body-secondary" style={{width: "auto"}}>
                <Nav>
                    <Link className="nav-link" to={"/item/"+root}>Main folder</Link>{" "}
                </Nav>
                <Nav>
                    <Link className="nav-link" to="/latest">Latest posts</Link>{" "}
                </Nav>
                <Nav>
                    <NavDropdown title="User">
                        <Link className="nav-link" to="/personhood">
                            Verify Your Account
                        </Link>
                        <Link className="nav-link" to="/prefs">
                            Settings
                        </Link>
                    </NavDropdown>
                </Nav>
                <Nav>
                    <Link className="nav-link" to="https://docs.zoncircle.com">Our site</Link>
                </Nav>
                <Nav>
                    <Link className="nav-link" to="https://docs.zoncircle.com/invest/">Invest</Link>
                </Nav>
                <Nav>
                    <NavDropdown title="About">
                        <NavDropdown.Item href="https://docs.zoncircle.com/blog-archive/">Blog</NavDropdown.Item>
                        <NavDropdown.Item href="https://docs.zoncircle.com/about-us/">About Us</NavDropdown.Item>
                        <NavDropdown.Item href="https://docs.zoncircle.com/our-partners/">Our Partners</NavDropdown.Item>
                        <NavDropdown.Item href="https://docs.zoncircle.com/#team">The Team</NavDropdown.Item>
                        <NavDropdown.Item href="https://docs.zoncircle.com/carbon-pledge/">Carbon Pledge</NavDropdown.Item>
                    </NavDropdown>
                </Nav>
                <Nav>
                    <NavDropdown title="Blog">
                        <NavDropdown.Item href="https://docs.zoncircle.com/blog-archive/">All posts</NavDropdown.Item>
                        <NavDropdown.Item href="https://docs.zoncircle.com/author/user/">CEO's posts</NavDropdown.Item>
                        <NavDropdown.Item href="https://docs.zoncircle.com/social-media/">Social Media</NavDropdown.Item>
                    </NavDropdown>
                </Nav>
            </Navbar>

Answer 1

您可以使用状态来处理这样的切换情况。我希望这对你有用：

import React, { useState } from 'react';
import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
import { Link } from 'react-router-dom';

const MyNavbar = () => {
    const [expand, setExpand] = useState(false);

    const handleToggle = () => {
        setExpand(false);
    };

    return (
        <Navbar collapseOnSelect expanded={expand} onToggle={setExpand} className="bg-body-secondary" style={{ width: "auto" }}>
            <Nav>
                <Link className="nav-link" to={"/item/" + root}>Main folder</Link>{" "}
            </Nav>
            <Nav>
                <Link className="nav-link" to="/latest">Latest posts</Link>{" "}
            </Nav>
            <Nav>
                <NavDropdown title="User" onClick={handleToggle }>
                    <Link className="nav-link" to="/personhood" onClick={handleToggle}>
                        Verify Your Account
                    </Link>
                    <Link className="nav-link" to="/prefs" onClick={handleToggle }>
                        Settings
                    </Link>
                </NavDropdown>
            </Nav>
            <Nav>
                <Link className="nav-link" to="https://docs.zoncircle.com">Our site</Link>
            </Nav>
            <Nav>
                <Link className="nav-link" to="https://docs.zoncircle.com/invest/">Invest</Link>
            </Nav>
            <Nav>
                <NavDropdown title="About" onClick={handleToggle }>
                    <NavDropdown.Item href="https://docs.zoncircle.com/blog-archive/" onClick={handleToggle }>Blog</NavDropdown.Item>
                    <NavDropdown.Item href="https://docs.zoncircle.com/about-us/" onClick={handleToggle }>About Us</NavDropdown.Item>
                    <NavDropdown.Item href="https://docs.zoncircle.com/our-partners/" onClick={handleToggle }>Our Partners</NavDropdown.Item>
                    <NavDropdown.Item href="https://docs.zoncircle.com/#team" onClick={handleToggle }>The Team</NavDropdown.Item>
                    <NavDropdown.Item href="https://docs.zoncircle.com/carbon-pledge/" onClick={handleToggle }>Carbon Pledge</NavDropdown.Item>
                </NavDropdown>
            </Nav>
            <Nav>
                <NavDropdown title="Blog" onClick={handleToggle }>
                    <NavDropdown.Item href="https://docs.zoncircle.com/blog-archive/" onClick={handleToggle }>All posts</NavDropdown.Item>
                    <NavDropdown.Item href="https://docs.zoncircle.com/author/user/" onClick={handleToggle }>CEO's posts</NavDropdown.Item>
                    <NavDropdown.Item href="https://docs.zoncircle.com/social-media/" onClick={handleToggle }>Social Media</NavDropdown.Item>
                </NavDropdown>
            </Nav>
        </Navbar>
    );
};

export default MyNavbar;