无法在 ReactJS 中关闭汉堡菜单答案

【问题标题】：Can't close the Hamburger Menu in ReactJS无法在 ReactJS 中关闭汉堡菜单
【发布时间】：2021-11-05 12:59:11
【问题描述】：

我正在尝试关闭我的汉堡菜单，但它没有关闭，首先我初始化并将 useState 设置为 false，

const [burgerStatus,setBurgerStatus] = useState(false);

然后我创建了一个样式组件 {BurgerNav}，然后传递了一个参数 show 并为其分配了 {burgerStatus}。

<BurgerNav show={burgerStatus}>

然后在 CSS 中，我用来变换

transform: ${props => props.show ? 'translateX(0)': 'translateX(100%)'};

然后，在 Hamburger 菜单中，我首先创建一个 onClick 处理程序并将BurgerStatus 设置为 true，然后我尝试单击菜单并成功打开。

<CustomMenu onClick={() => setBurgerStatus(true)}></CustomMenu>

然后我创建了另一个 onClick 处理程序来关闭菜单但它无法工作

<CloseWrapper> 
     <CustomClose onclick={() => setBurgerStatus(false)}>
     </CustomClose>
</CloseWrapper>

完整代码

    const [burgerStatus,setBurgerStatus] = useState(false);
    return (
        <Container>
            <a>
                <img src="/images/logo.svg" alt=""/> 
            </a>
             <Menu>
                <a href="#"> Model S</a> 
                <a href="#"> Model 3</a>
                <a href="#"> Model X</a>
                <a href="#"> Model Y</a> 
             </Menu>
             <RightMenu>
                <a href="#"> Shop</a> 
                <a href="#"> Tesla Account</a> 
                <CustomMenu onClick={() => setBurgerStatus(true)}>
                </CustomMenu>
             </RightMenu>
             <BurgerNav show={burgerStatus}>
                 <CloseWrapper> 
                    <CustomClose onclick={() => setBurgerStatus(false)}>
                    </CustomClose>
                 </CloseWrapper>
                 <li><a href="#">Existing Inventory</a></li>
                 <li><a href="#">Used Inventory</a></li>
                 <li><a href="#">Trade-in</a></li>
                 <li><a href="#">Cyber truck</a></li>
                 <li><a href="#">Roadster</a></li>
             </BurgerNav>
        </Container>

【问题讨论】：

标签： reactjs

【解决方案1】：

我发现您的代码中有语法错误

<CloseWrapper> 
     <CustomClose onclick={() => setBurgerStatus(false)}>
     </CustomClose>
</CloseWrapper>

在此处更改onclick to onClick

<CloseWrapper> 
     <CustomClose onClick={() => setBurgerStatus(false)}>
     </CustomClose>
</CloseWrapper>

那么它必须工作，如果我的回答有帮助，请给予支持并接受它作为答案。

【讨论】：

【解决方案2】：

我建议您在代码编辑器中编辑您的settings.json。

通过添加 -

"emmet.includeLanguages": {
    "javascriptreact"
  }

这可以帮助您自动完成 JSX，并希望在将来帮助解决这些小错误。或者还添加一个添加语法高亮的扩展，确实有助于更轻松地查看所有内容。

【讨论】：