React Navbar 在链接点击时不折叠答案

【问题标题】：React Navbar Not Collapsing On Link ClickReact Navbar 在链接点击时不折叠
【发布时间】：2021-04-19 23:41:13
【问题描述】：

我按照教程创建了一个 React NavBar，当我单击汉堡菜单时，导航按预期展开和折叠，但是当我单击导航菜单上的链接时，它转到页面但导航栏没有不要崩溃。我检查了一些问题/指南，但它们都链接到 Bootstrap，并且这段代码不使用 Bootstrap，如果可以避免的话，我宁愿不将 NavBar 更改为 Bootstrap！任何帮助将不胜感激。

import React, { Component } from "react";
import logo from "../images/logo.svg";
import { FaAlignRight } from "react-icons/fa";
import { Link } from "react-router-dom";

export default class Navbar extends Component {
  state = {
    isOpen: false
  };
  handleToggle = () => {
    this.setState({ isOpen: !this.state.isOpen });
  };

  componentDidMount() {
    window.addEventListener("scroll", this.resizeHeaderOnScroll);
    window.addEventListener("scroll", this.navTransparent);
    window.addEventListener("scroll", this.navShadow);
  };
  resizeHeaderOnScroll() {
    const distanceY = window.pageYOffset || document.documentElement.scrollTop,
      shrinkOn = 100,
      headerEl = document.getElementById("logo");
    if (distanceY > shrinkOn) {
      headerEl.classList.add("logoShrink");
      
    } else {
      headerEl.classList.remove("logoShrink");
    }
  }

  navTransparent() {
    const distanceY = window.pageYOffset || document.documentElement.scrollTop,
      shrinkOn = 100,
      headerEl = document.getElementById("navbar");
    if (distanceY > shrinkOn) {
      headerEl.classList.add("navbarBg");
      
    } else {
      headerEl.classList.remove("navbarBg");
    }

  }
  
  navShadow() {
    const distanceY = window.pageYOffset || document.documentElement.scrollTop,
      shrinkOn = 100,
      headerEl = document.getElementById("navbar");
    if (distanceY > shrinkOn) {
      headerEl.classList.add("navShadow");
      
    } else {
      headerEl.classList.remove("navShadow");
    }
  }
  render() {
    return <nav id="navbar">
      <div className="nav-center">
        <div className="nav-header">
          <Link to="/">
            <img id="logo" src={logo} alt="" />
          </Link>
          <button type="button" className="nav-btn" onClick={this.handleToggle}>
            <FaAlignRight className="nav-icon" />
          </button>
        </div>
        <ul className={this.state.isOpen ? "nav-links show-nav" : "nav-links"}>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/nigelservices">Services</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
          </ul>
      </div>
    </nav>;
  }
}

【问题讨论】：

也许您可以在执行handleToggle 功能的链接组件中使用onClick，这样每次访问链接时侧边栏也会关闭。
好的，我可以试试，你有什么链接或文档可以看吗？
我没有任何文档，但你可以这样做： this.setState({ isOpen: false })}>Services 和那应该工作。记得在每个链接中添加它
我在理解你的意思之后才这样做，你能在主线程中回答这个问题，我可以将其标记为解决方案:) ?

标签： reactjs navbar hamburger-menu

【解决方案1】：

要在这里回答问题，您可以随时这样做，因为 Link 组件接受 onClick 属性：

export default class Navbar extends Component {
 // Rest of your code
 handleLinkClick = () => {
  this.setState({ isOpen: false });
 };

 render() {
  return (
  // Your JSX
   <Link to="/" onClick={handleLinkClick}>Home</Link>
  )
 }
}

记得在每个链接组件中添加这个。

作为旁注，您还可以在路由是当前路由时使用反应路由器中的 NavLink 组件来处理样式。 https://reactrouter.com/web/api/NavLink

【讨论】：

谢谢jean182！非常感谢您的时间！