单击链接时reactstrap关闭导航

Question

我确定以前有人问过这个问题，但是我找不到答案。当您在 reactstrap 中单击 NavLink 时，如何关闭 Nav 菜单，或者这仍在开发中？

Answer 1

这是路由问题。在普通网页上，引导导航中的链接将导致加载新页面，而导航现在已关闭。由于 react 不会重新加载页面，因此导航保持打开状态。为了解决这个问题，您需要在导航中的每个 <Link> 元素中添加以下内容：onClick={this.toggleNavbar}。

Answer 2

Reactstrap 在 state 中有一个isOpen 参数，所以需要设置为false

    constructor(props) {
        super(props);

        this.closeNavbar = this.closeNavbar.bind(this);
        this.state = {
            isOpen: false
        };
    }

    closeNavbar() {
        this.setState({
            isOpen: false
        });
    }

    // and in Link or a element add onClick handler like this


    <Link to="/" onClick={closeNavbar}>Home</Link>

这是我使用的代码：

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import library from './FontAwesomeLibrary';
import logo from '../../assets/images/logo.svg';

import {
    Collapse,
    Navbar,
    NavbarToggler,
    Nav,
    NavItem } from 'reactstrap';

class Topbar extends Component {
    constructor(props) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.closeNavbar = this.closeNavbar.bind(this);
        this.handleClickOutside = this.handleClickOutside.bind(this);

        this.state = {
            isOpen: false,
        };
    }
    componentWillMount() {
        document.addEventListener('mousedown', this.handleClickOutside);
    }
    componentWillUnmount() {
        document.removeEventListener('mousedown', this.handleClickOutside);
    }

    toggle() {
        this.setState({
            isOpen: !this.state.isOpen
        });
    }
    closeNavbar() {
        this.setState({
            isOpen: false
        });
    }
    handleClickOutside(event) {
        const t = event.target;
        if (this.state.isOpen && !t.classList.contains('navbar-toggler')) {
            this.closeNavbar();
        }
    }

    render() {
        return (
            <div className="topbar">
                <section className="container">
                    <Navbar color="light" className="header" expand="md">
                        <Link className="locoLink" to="/"><img src={logo} className="logo" alt="logo" /></Link>
                        <Link to="/" className="logoCompany">Redux Blog</Link>
                        <NavbarToggler onClick={this.toggle}>
                            <FontAwesomeIcon icon={this.state.isOpen ? "times" : "bars"}/>
                        </NavbarToggler>
                        <Collapse isOpen={this.state.isOpen} navbar>
                            <Nav className="ml-auto routes" navbar>
                                <NavItem>
                                    <Link to="/" onClick={this.closeNavbar}>Posts</Link>
                                </NavItem>
                                <NavItem>
                                    <Link to="/posts/new" onClick={this.closeNavbar}>New Post</Link>
                                </NavItem>
                            </Nav>
                        </Collapse>
                    </Navbar>
                </section>
            </div>
        );
    }
}

export default Topbar;

它还处理外部点击。

FontAwesomeLibrary

import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { faMugHot } from '@fortawesome/free-solid-svg-icons';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { faBars } from '@fortawesome/free-solid-svg-icons';
import { faChevronUp } from '@fortawesome/free-solid-svg-icons';

library.add(faCoffee);
library.add(faMugHot);
library.add(faTimes);
library.add(faBars);
library.add(faChevronUp);

export default library;

我创建了 FontAwesomeLibrary 根据 https://fontawesome.com/how-to-use/on-the-web/using-with/react