当我单击链接时，我试图关闭 React Bootstrap 中的 offcanvas 菜单

Question

我正在使用 React Bootstrap 和 React 的组合来制作单页面应用程序，我尝试了几种方法来在单击链接时关闭 Offcanvas 菜单。我尝试在切换菜单的链接上创建一个内联脚本，但我发现菜单会按照我想要的方式关闭，但链接只带我到它应该导航到的位置的一半。

这是我到目前为止的代码：

import React from "react";
import { Navbar, Nav, Container, Offcanvas } from "react-bootstrap";
import { StaticImage } from "gatsby-plugin-image";
import styled from "styled-components";
import { Link } from "gatsby";

const Wrapper = styled.div`
  background-color: #9ac2ba;
  .Nav-Brand {
    display: flex;
  }
  .navbar {
    background-color: #9ac2ba;
  }
`;

const LinkWrapper = styled.div`
  margin-top: 20px;
  font-size: 1.5rem;
  text-align: center;
  color: #333;
  .nav-link {
    color: #333;
  }
  .nav-link:hover {
    color: #000;
  }
`;

const Navigation = () => {
  return (
    <Wrapper>
      <Navbar
        as="nav"
        variant="light"
        fixed="top"
        expand={false}
        className="shadow"
      >
        <Container>
          <Navbar.Brand href="/" className="Nav-Brand">
            <StaticImage
              src="../images/Spf-Brand-01.jpg"
              alt="Brand Image"
              layout="constrained"
              placeholder="blurred"
              height={50}
              loading="eager"
            />
            <h1 className="visually-hidden">
              SPF Paint &amp; Decorating, Birmingham
            </h1>
          </Navbar.Brand>
          <Navbar.Toggle
            aria-controls="offcanvasNavbar"
            aria-labelledby="offcanvasNavbarLabel"
          />
          <Navbar.Offcanvas id="offcanvasNavbar" placement="start">
            <Offcanvas.Header closeButton>
              <Offcanvas.Title id="offcanvasNavbarLabel">
                <span className="visually-hidden">SPF Nav Menu</span>
              </Offcanvas.Title>
            </Offcanvas.Header>
            <Offcanvas.Body>
              <Nav className="justify-content-end flex-grow-1 pe-3">
                <StaticImage
                  src="../images/Spf-Brand-01.jpg"
                  alt="Brand Image"
                  layout="constrained"
                  placeholder="blurred"
                  height={50}
                  loading="eager"
                  className="offcanvas-brand"
                />
                <LinkWrapper>
                  <Link to="/" className="nav-link">
                    Home
                  </Link>
                  <Link to="/#services" className="nav-link">
                    Services
                  </Link>
                  <Link to="/#faq" className="nav-link">
                    FAQ
                  </Link>
                  <Link to="/#contact" className="nav-link">
                    Contact
                  </Link>
                </LinkWrapper>
              </Nav>
            </Offcanvas.Body>
          </Navbar.Offcanvas>
        </Container>
      </Navbar>
    </Wrapper>
  );
};

export default Navigation;

这是网站的构建：https://pland.netlify.app/

Answer 1

您的所有链接都指向同一页面上的内容，因此无需使用

Link

。相反，请将它们替换为常规锚标记

<a href=''>Link</a>

其次，

Offcanvas

的默认行为是，当覆盖层关闭时，焦点将返回到打开覆盖层时的位置。这就是为什么当覆盖层关闭时页面没有滚动到正确的位置。要更改此设置，您可以将

restoreFocus={false}

属性传递给 Offcanvas。 请参阅 Offcanvas API 文档。

第三，要让菜单在单击链接时关闭，您应该跟踪菜单是否处于打开状态，并向每个链接的

onClick

属性以及

Navbar.Toggle

添加切换功能。

const Navigation = () => {
  const [menuOpen, setMenuOpen] = useState(false)
  const toggleMenu = () => {
    setMenuOpen(!menuOpen)
  }

  const handleClose = () => setMenuOpen(false)

  return(
   /** Omit code */
  
  <Navbar.Toggle
      aria-controls='offcanvasNavbar'
      aria-labelledby='offcanvasNavbarLabel'
      /** Add onClick toggle here */
      onClick={toggleMenu}
    />
    <Navbar.Offcanvas
      id='offcanvasNavbar'
      placement='start'
      /** Add these props */
      restoreFocus={false}
      show={menuOpen}
      onHide={handleClose}
    >
    
    /** omit code */

    <Nav className='justify-content-end flex-grow-1 pe-3'>
        <a href='#services' className='nav-link' onClick={toggleMenu}>
           Services
        </a>
        <a href='#faq' className='nav-link' onClick={toggleMenu}>
           FAQ
        </a>
        {/** more links */}
     </Nav>
    /** omit code */
 )
}

Answer 2

文档中有一个自动关闭的选项：

collapseOnSelect

https://react-bootstrap.netlify.app/components/navbar/#navbar-props

    <Navbar
        collapseOnSelect
        as="nav"
        variant="light"
        fixed="top"
        expand={false}
        className="shadow"
      >

Answer 3

@bernieu2 的回答对我有用，但我仍然遇到中途滚动问题。我通过创建一个scrollTop函数并将其作为回调传递给Offcanvas元素的“onExit”属性来修补这个问题，如下所示：

constscrollTop = ()=>{window.scrollTo(0, 0)}

。 。 。 ………… 。 。 .