我的 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.jsimport 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;
最佳答案
onClick
<div className="hamburger">
中的事件可能会干扰抽屉的打开状态。
由于抽屉是该 div 的子元素,因此每次点击抽屉都会传播并调用 onClick
其父元素的事件也是如此。
试试把 <Drawer>
<div className="hamburger">
之外
或使用 event.stopPropagation()
在 onClick
在抽屉组件中停止该行为,如下所示:<Drawer onClick={(event) => {event.stopPropagation()}}>
希望这会有所帮助!
关于javascript - MUI Drawer 在 React Web 应用程序中打开但未关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72982782/