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 添加到关闭/打开侧边栏。

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>
  )
}