AnchorLink 上的 GatsbyJS Burger Menu 关闭菜单单击

Question

我使用 react-burger-menu 在我的 Gatsby 应用程序中创建了一个有效的汉堡菜单。我正在尝试获取它，以便在单击汉堡中的 AnchorLink 时关闭汉堡菜单。我试过按照文档中的建议做 <Menu isOpen={ false }> 但没有用。有帮助吗？

这是我的汉堡菜单代码：

import React from "react"
import { slide as Menu } from "react-burger-menu"
import { AnchorLink } from "gatsby-plugin-anchor-links"

const Burger = () => {
  return (
    <div className="burger-menu">
      <Menu right isOpen={ false }>
        <AnchorLink to="/#about">About Me</AnchorLink>

        <AnchorLink to="/#experience">Experience</AnchorLink>

        <AnchorLink to="/#projects">Projects</AnchorLink>

        <AnchorLink to="/#contact">Contact</AnchorLink>

      </Menu>
    </div>
  )
}

export default Burger

Answer 1

您可以为 Menu 和 AnchorLink 提供事件处理程序，并将状态 menuOpen 添加到 close/open 侧边栏。

const Burger = () => {
  const [menuOpen, setMenuOpen] = React.useState(false)

  // This keeps your state in sync with the opening/closing of the menu
  // via the default means, e.g. clicking the X, pressing the ESC key etc.
  const handleStateChange = state => {
    setMenuOpen(state.isOpen)
  }

  // This can be used to close the menu, e.g. when a user clicks a menu item
  const closeMenu = () => {
    setMenuOpen(false)
  }

  return (
    <div className="burger-menu">
      <Menu
        right
        isOpen={menuOpen}
        onStateChange={state => handleStateChange(state)}
      >
        <AnchorLink
          to="/#about"
          onClick={() => {
            closeMenu()
          }}
        >
          About Me
        </AnchorLink>

        <AnchorLink
          to="/#experience"
          onClick={() => {
            closeMenu()
          }}
        >
          Experience
        </AnchorLink>

        <AnchorLink
          to="/#projects"
          onClick={() => {
            closeMenu()
          }}
        >
          Projects
        </AnchorLink>

        <AnchorLink
          to="/#contact"
          onClick={() => {
            closeMenu()
          }}
        >
          Contact
        </AnchorLink>
      </Menu>
    </div>
  )
}

AnchorLink 上的 GatsbyJS Burger Menu 关闭菜单单击

GatsbyJS Burger Menu close menu on AnchorLink click

reactjs

hamburger-menu