Question

我有一个使用盖茨比链接的汉堡导航，并在整个网站中导航。它可以按预期工作，但是如果我与要单击的锚元素位于同一页面上，则菜单不会关闭。如果我将其关闭，则可以看到它导航到需要的位置。

当我添加onClick函数时，它会覆盖导航，因此菜单会关闭，但不会在任何地方导航。该如何解决？

import React, { useState } from "react"
import { string } from "prop-types"

import { Link } from "gatsby"

import styles from "./styles.module.less"

const Navbar = ({ siteTitle, navColor }) => {
  const [isHidden, showNavigation] = useState(true)

  const links = (
    <div className={styles.links}>
      <Link to="/about">About</Link>
      <Link to="/people">People</Link>
      <Link to="/#work">Work</Link>
      <Link to="/careers">Careers</Link>
      <Link to="/contact-us">Contact</Link>
    </div>
  )

  const handleMenuToggle = e => {
    e.preventDefault()
    showNavigation(!isHidden)
  }
  let nvColor = navColor ? navColor : "translate"
  let logo = navColor ? blackLogo : whiteLogo
  return (
    <>
      <header data-component="Navbar" className={styles.Navbar}>
        <Link to="/" className={styles.logo} title={siteTitle}>
          <img src={logo} alt={siteTitle} />
        </Link>
        <a
          className={styles.menu}
          href="#main-nav"
          title="View menu"
          onClick={handleMenuToggle}
          style={{ color: nvColor }}
        >
          …
        </a>
      </header>
      <div>
        <nav id="main-nav" className={styles.MainNav} hidden={isHidden}>
          <div className={styles.blocks}>
            <div className={styles.LeftNav}>
              <a
                onClick={handleMenuToggle}
                title="Hide menu"
                href="#"
                className={styles.close}
              >
                <img src={close} alt="Hide menu" />
              </a>

              {links}
            </div>




          </div>
        </nav>
      </div>
    </>
  )
}

Navbar.propTypes = {
  siteTitle: string,
}

export default Navbar

Answer 1

您只需要停止阻止默认行为

const handleMenuToggle = e => {
  e.preventDefault() // Remove this line
  showNavigation(!isHidden)
}

选择锚链接React和Gatsby后关闭菜单

1 个答案: