javascript - MUI Drawer 在 React Web 应用程序中打开但未关闭

Question

我的 React 应用程序中有一个 Navbar 组件，当屏幕很小时它会显示一个 Sidebar 组件。我为 Drawer 使用 Material UI 来显示侧边栏。
我的问题是，单击汉堡图标后，抽屉打开正常。但是在单击链接时甚至在侧边栏之外它都不会关闭。
如何解决这个问题？我究竟做错了什么？这是我的代码。
导航栏.js

import React, { useContext, useEffect, useState } from "react";
import "./navbar.css";
import Sidebar from "./Sidebar";
import { NavLink } from "react-router-dom";
import { Drawer } from "@mui/material";
import IconButton from "@mui/material/IconButton";

import MenuIcon from "@mui/icons-material/Menu";

const Navbar = () => {
  const [drwOpen, setDrwOpen] = useState(false);

    const handleOpen = () => {
    setDrwOpen(true);
  };
  const handleClose = () => {
    setDrwOpen(false);
  };


 return (
    <header>
      <nav>
            <div className="left">
            <div className="hamburger" onClick={handleOpen}>
                <IconButton>
                <MenuIcon style={{ color: "#fff" }} fontSize="large" />
                </IconButton>
                <Drawer open={drwOpen} onClose={handleClose}>
                <Sidebar logClose={handleClose}/>
                </Drawer>
            </div>

            <NavLink to="/">
                <img
                className="navlogo"
                src={process.env.PUBLIC_URL + "/math.png"}
                alt="logo"
                />
            </NavLink>
            </div>
        </nav>
      </div>
    </header>
  );
};

export default Navbar;

Sidebar.js

import React from "react";
import { NavLink } from "react-router-dom";
import { useContext, useState } from "react";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import "./sidebar.css";

const Sidebar = ({logClose}) => {

  return (
    <>
      <div className="sidebar">
        <p>random text</p>
        <div className="menu" onClick={()=>logClose()}>
          <NavLink to="/" style={{ textDecoration: "none" }} className="lis" >
            <p>ABC</p>
            <ChevronRightIcon style={{ fill: "#949494" }}/>
          </NavLink>

          <NavLink to="/" style={{ textDecoration: "none" }} className="lis">
            <pXYZ</p>
            <ChevronRightIcon style={{ fill: "#949494" }}/>
          </NavLink>

          <NavLink to="/" style={{ textDecoration: "none" }} className="lis">
            <p>123</p>
            <ChevronRightIcon style={{ fill: "#949494" }}/>
          </NavLink>
        </div>
      </div>
    </>
  );
};

export default Sidebar;

Answer 1

onClick <div className="hamburger"> 中的事件可能会干扰抽屉的打开状态。
由于抽屉是该 div 的子元素，因此每次点击抽屉都会传播并调用 onClick其父元素的事件也是如此。
试试把 <Drawer> <div className="hamburger"> 之外
或使用 event.stopPropagation()在 onClick在抽屉组件中停止该行为，如下所示:<Drawer onClick={(event) => {event.stopPropagation()}}>希望这会有所帮助!