MUI 抽屉在 React Web 应用程序中打开但未关闭

Question

我的 React 应用程序中有一个 Navbar 组件，当屏幕较小时，它会显示一个 Sidebar 组件。我使用抽屉的 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;

侧边栏.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()}}>

希望这可以帮助！