reactjs - Toggle Button onClick 不会改变我的 div 的位置
问题描述
所以我一直在关注本教程并翻译成反应,但我似乎无法让类名切换。
import React, { useState } from "react"
import styled from "styled-components"
const Navbar = () => {
const [active, setActive] = useState("burger")
const showSideBar = () => {
setActive("nav-active")
}
return (
<Wrapper>
<div className="logo">Logo</div>
<div className="nav">
<ul className="nav-links">
<li>Home</li>
<li>About</li>
<li>Nutrition</li>
<li>Blog</li>
</ul>
</div>
<div className={active} onClick={showSideBar} role="button">
<div className="line1"></div>
<div className="line2"></div>
<div className="line3"></div>
</div>
</Wrapper>
)
}
const Wrapper = styled.nav`
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
margin: 0px;
box-sizing: border-box;
display: flex;
justify-content: space-around;
min-height: 8vh;
color: #2ec1ac;
font-family: "Poppins", sans-serif;
.logo {
font-size: 30px;
text-align: left;
}
.nav-links {
display: flex;
justify-content: space-around;
text-decoration: none;
}
li {
list-style: none;
}
.nav {
width: 40%;
}
.line1,
.line2,
.line3 {
width: 25px;
height: 3px;
background-color: #2ec1ac;
margin: 5px;
}
.burger {
margin-top: 10px;
display: none;
}
@media screen and (max-width: 1024px) {
.nav {
width: 60%;
font-size: 23px;
}
}
@media screen and (max-width: 768px) {
overflow-x: hidden;
.nav {
position: absolute;
right: 0px;
height: 120vh;
top: 20vh;
background-color: #2ec1ac;
color: #fff;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
ul {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
li {
padding: 10%;
opacity: 0;
}
.burger {
display: block;
}
.nav-active {
nav {
transform: translateX(100%);
}
li {
opacity: 1;
}
}
}
我只是想让一个侧边栏在单击时做出反应,它应该滑回视图,但即使类切换它仍然保持不变。我创建了一个函数,onClick 它更改了 div 的类名,但我似乎无法让它工作。`
解决方案
className 应该已经在切换,但根据您的 CSS,看起来您应该将active
状态放置为 a className
to<div className="nav">
而不是这个元素<div className={active} onClick={showSideBar} role="button">
<div className={`nav ${active}`}>
<ul className="nav-links">
<li>Home</li>
...
回到您的样式表,您依靠转换属性来移动导航,但无论它是否处于活动状态,您都保留在transform: translateX(100%);
. 您需要在该值处于活动状态时对其进行更新
.nav-active {
transform: translateX(0%);
}
推荐阅读
- electron - 使用 escpos 包和串口创建收据
- python - 用于非终止 python 程序的 cProfile
- android - 将仪器测试放在功能模块中
- r - 如何使用 group_by 函数在 dplyr 中应用预先设计的函数
- git - git:在合并期间提交分阶段的更改(没有合并冲突)
- python - 如何重复多个输入,直到得到指定的答案?
- c# - 我必须从数据库中选择相同的 projectId、相同的资源 Id 行
- node.js - 在 Electron 应用中,使用 webpack/electron-builder 打包后,在 worker_threads 提示 MODULE_NOT_FOUND 中需要第三方模块
- cube - 未能获得推荐的 Cuboid
- css - 媒体查询不适用于 CSS 网格布局