javascript 无法将汉堡菜单添加到Reactjs代码

9nvpjoqh  于 2023-03-06  发布在  Java
关注(0)|答案(2)|浏览(118)

当我的reactjs页面点击移动的大小屏幕汉堡包图标显示,但我不知道如何添加/打开面板时,用户点击汉堡包图标。

<div className={styles["navbar-responsive-menu"]}>
     <Button theme="transparent">
           <HamburgerMenu size="32" color="var(--white-100)"/>
     </Button>
</div>
mm9b1k5b

mm9b1k5b1#

您需要某种类型的逻辑来确定单击时何时打开和关闭。useState()将是我的首选。

import React, { useState } from 'react';
// ...

const Navbar = () => {
    // 'nav' will store the value, 'setNav' will change the value
    const [nav, setNav] = useState(false);
    // change the value of 'nav'
    const handleNav = () => {
        setNav(!nav)
    };

    return (
    // ...
    <HambergerMenu size="32" color="var(--white-100)" onClick={handleNav} />
    );
    // ...

};

现在,您需要使用一些三元运算符(:?)来更改将呈现实际菜单的指定组件的className。

return (
    // ...
    <HambergerMenu size="32" color="var(--white-100)" onClick={handleNav} />
    // if nav === true, menuHide class, otherwise menuShow
    <div className={nav ? 'menuHide' : 'menuShow'}>
        <MobileMenu />
    </div>
    // ...

);

但是,当实际菜单打开时,您可能还希望出现一个“X”类型的按钮来代替汉堡菜单按钮,并且,当菜单显示时,您可能还希望隐藏汉堡菜单按钮。
你需要在<HamburgerMenu />中添加一个动态的className来隐藏nav === true,然后添加一个默认隐藏的<CloseMenu />,但是在nav === true时会显示出来,这些都可以使用相同的逻辑来完成。
希望上面的片段能有所帮助。

a0x5cqrl

a0x5cqrl2#

您应该创建一个状态变量,例如:const [面板打开,设置面板打开] =使用状态(假);
然后,当您单击汉堡包时,添加一个onclick事件来切换状态,例如onClick={togglePanel}
然后在togglePanel函数中,按如下方式切换状态:设置面板打开(!panel打开)
然后,当panelOpen变量为true时,使用条件呈现来呈现面板,例如{panelOpen &&(... Panel code)}
干杯伙计。

相关问题