Question

在React功能组件中单击关闭菜单最有效的方法是什么？我正在尝试关闭<Menu />或外部菜单，以使<Link />关闭。当前，当我导航到其他组件时，它保持打开状态。

我使用：https://github.com/negomi/react-burger-menu

MobileMenu.js

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { elastic as Menu } from 'react-burger-menu';
import './MobileMenu.scss';

const MobileMenu = () => {
    
const [menuOpenState, setMenuOpenState] = useState(false)

const MyContext = React.createContext();

// const showSettings = event =>{
//     event.preventDefault();
// }
  return (
    <div className="mobileMenu" id="outer-container"> 
        <Menu right pageWrapId={ "page-wrap" } outerContainerId={ "outer-container"} isOpen={ false }>
            <main id="page-wrap">
                <MyContext.Provider value={{
                    isMenuOpen: menuOpenState,
                    toggleMenu: () => setMenuOpenState(!menuOpenState),
                    stateChangeHandler: (newState) => setMenuOpenState(newState.isOpen)
                }}>
                </MyContext.Provider>
                <Link id="home "to={'/'} className="menu-item">home</Link>
                <Link id="projects" to={'/projects'} className="menu-item">projects</Link>
                <Link id="experiment" to={'/experiment'} className="menu-item">experiment</Link>
                {/* <a onClick={ showSettings } className="menu-item--small" href="/">Settings</a> */}
            </main>
        </Menu>
    </div>
  )
}
export default MobileMenu

Answer 1

一种方法是添加一个具有绝对值的div元素，并拉伸z-index: 100;上的整个屏幕显示，并拉伸z-index: 101;上的菜单，然后仅使用菜单并以这种方式设置onClick={() =>setMenuOpenState(false)}会更有效

如何通过单击外部菜单和菜单项来关闭“反应汉堡菜单”

1 个答案: