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

<div className="hamburger">中的onClick事件可能会干扰抽屉的打开状态。

由于抽屉是该 div 的子元素，因此每次点击抽屉都会传播并调用其父元素的onClick事件。

尝试将<Drawer>放在<div className="hamburger">之外

或者在抽屉组件的onClick中使用event.stopPropagation()来停止该行为，如下所示：

<Drawer onClick={(event) => {event.stopPropagation()}}>

希望这会有所帮助！