我正在学习 react.js。我在移动设备上单击菜单时遇到问题。
我正在移动设备上显示 Humbarger 图标。现在如何在用户点击 Humbarger 图标时显示关闭图标和菜单列表？
第二个问题是，
我在主页上，我从菜单中单击了关于我们，然后我的页面被重定向到关于我们，但问题是我的菜单仍然显示为打开状态。我必须关闭菜单，以便用户可以访问关于页面。
（步骤 1）
（第 2 步）我点击 Humbarger 图标并打开菜单，然后点击关于我们
（步骤 3） 现在注意这里，页面被重定向到关于我们，但菜单仍然打开。
你可以在这里查看我的代码：https://codesandbox.io/s/happy-almeida-t6q7w?file=/src/components/Header.js
你能帮我解决这个问题吗？
【问题讨论】：
您可以做的是将事件处理程序添加到汉堡菜单并关闭图标以更新本地状态，例如 open 或 close。然后根据您添加或删除类名的状态。像这样：
Style.css
/* When we click the hamburger menu we want to hide the icon */
.hamburger_img.close {
display: none;
}
/* When we click the menu we want to display this icon */
.right-menu.open {
display: block;
}
HeaderMenu.js
const HeaderMenu = () => {
// Adding class name when scrolll
const [openMenu, setOpenMenu] = useState(false);
// Other code here..
// A toggler to update the state when we open or close menu
const toggleMenu = () => setOpenMenu(openMenu => !openMenu);
// Dynamically add 'open' class if the state is true
const getXMarkClassName = () => `right-menu float-right ${openMenu ? 'open': ''}`;
// Dynamically add 'close' class if the state is true
const getHamburgerMenuClassName = () => `hamburger_img ${openMenu ? 'close': ''}`;
return (
<header id="header_menu" className={headerClassName}>
<div className={getHamburgerMenuClassName()} onClick={toggleMenu} >
<img src={require("../images/menu.png")} alt="Menu bar"/>
</div>
<div className={getXMarkClassName()}>
<div className="x_mark_img" onClick={toggleMenu} >
<img src={require("../images/close.png")} alt="Menu Close" />
</div>
<ul>
{/* code here... */}
</ul>
</div>
</header>
);
};
请注意，我向div 添加了一个onClick 处理程序，以便在单击它们时更新状态。同样值得注意的是，我调用了一个函数来获取图标菜单和关闭图标的className。
第二期
要在路由更改时关闭导航，您可以使用useEffect 监听路由更改，然后调用toggle() 函数。像这样：
import React, { useEffect } from 'react';
import { useLocation } from 'react-router';
function HeaderMenu() {
// Other code here...
const location = useLocation();
useEffect(() => {
console.log("route has been changed, toggle the menu");
if (openMenu) {
toggleMenu();
}
// To scroll up on route change
window.scrollTo(0, 0);
}, [location.pathname]);
// Other code here...
}
请注意，我没有将 openMenu 添加到 useEffect 和 location.pathname 的依赖项列表中。这是因为我不希望这个 useEffect 在openMenu 状态仅在路由更改时才运行。我有一个 if 语句，所以如果路线发生变化并且菜单没有打开，则不应调用切换。
希望对您有所帮助。你可以在这个codesandbox进行测试
【讨论】：