javascript - 如何在css“ClassName”和React中添加和删除类?
问题描述
我正在学习 React,我无法适应的一件事是如何删除和添加 css 类,例如在以下组件中
import React from 'react';
import "../../styles/signInAndSignUp.css";
import login from "../../assets/img/log.svg";
import register from "../../assets/img/register.svg"
export const LoginScreen = () => {
return (
<>
<div className="container-login">
<div className="forms-container">
<div className="signin-signup">
<form action="!#" className="sign-in-form">
<h2 className="title">Sign in</h2>
<div className="input-field">
<i className="fas fa-user"></i>
<input type="text" placeholder="Username" />
</div>
<div className="input-field">
<i className="fas fa-lock"></i>
<input type="password" placeholder="Password" />
</div>
<input type="submit" value="Login" className="btn solid" />
<p className="social-text">Or Sign in with social platforms</p>
<div className="social-media">
<a href="!#" className="social-icon">
<i className="fab fa-facebook-f"></i>
</a>
<a href="!#" className="social-icon">
<i className="fab fa-twitter"></i>
</a>
<a href="!#" className="social-icon">
<i className="fab fa-google"></i>
</a>
<a href="!#" className="social-icon">
<i className="fab fa-linkedin-in"></i>
</a>
</div>
</form>
<form action="!#" className="sign-up-form">
<h2 className="title">Sign up</h2>
<div className="input-field">
<i className="fas fa-user"></i>
<input type="text" placeholder="Username" />
</div>
<div className="input-field">
<i className="fas fa-envelope"></i>
<input type="email" placeholder="Email" />
</div>
<div className="input-field">
<i className="fas fa-lock"></i>
<input type="password" placeholder="Password" />
</div>
<input type="submit" className="btn" value="Sign up" />
<p className="social-text">Or Sign up with social platforms</p>
<div className="social-media">
<a href="!#" className="social-icon">
<i className="fab fa-facebook-f"></i>
</a>
<a href="!#" className="social-icon">
<i className="fab fa-twitter"></i>
</a>
<a href="!#" className="social-icon">
<i className="fab fa-google"></i>
</a>
<a href="!#" className="social-icon">
<i className="fab fa-linkedin-in"></i>
</a>
</div>
</form>
</div>
</div>
<div className="panels-container">
<div className="panel left-panel">
<div className="content">
<h3>New here ?</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis,
ex ratione. Aliquid!
</p>
<button className="btn transparent" id="sign-up-btn">
Sign up
</button>
</div>
<img src={login} className="image" alt="" />
</div>
<div className="panel right-panel">
<div className="content">
<h3>One of us ?</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum
laboriosam ad deleniti.
</p>
<button className="btn transparent" id="sign-in-btn">
Sign in
</button>
</div>
<img src={register} className="image" alt="" />
</div>
</div>
</div>
</>
)
}
通常使用纯 JavaScript 我会这样做
const sign_in_btn = document.querySelector("#sign-in-btn");
const sign_up_btn = document.querySelector("#sign-up-btn");
const container = document.querySelector(".container");
sign_up_btn.addEventListener("click", () => {
container.classList.add("sign-up-mode");
});
sign_in_btn.addEventListener("click", () => {
container.classList.remove("sign-up-mode");
});
这些类所做的是根据用户按下的按钮显示登录或唱歌
提前感谢任何可以帮助我的人
解决方案
正如 Charlietfl 所提到的,您向我们展示的 vanilla js 代码无法正常工作,因为它们会相互抵消。
对于您的反应问题:我首先建议您从了解状态开始,正如 Robin 所提到的。如果你有某种状态,让我们说两个状态:
const [addedClass, setAddedClass] = useState(false);
const [class, setClass] = useState('container');
现在,您在这里有一个布尔值来处理 onClick 事件,用作添加“容器”类的条件。就像是:
const handleClick = () => {
setAddedClass(prev => !prev)
}
所以,如果你有一个 div 并且你想添加容器类名,你可以使用 state 有条件地将它添加到 div 中,如下所示:
const [addedClass, setAddedClass] = useState(false);
const [className, setClassName] = useState('container');
const handleClick = () => {
setAddedClass(prev => !prev)
}
// console.log(addedClass) to see if the state is changing
return (
<div className={addedClass ? className : null}>
<button onClick={handleClick}>Toggle Class name</button>
</div>
)
}
每次单击按钮时,它都会运行 handleClick 函数以将 addedClass 状态更改为与原来相反的状态(true -> false,反之亦然)。使用 className 中的三元组,div 将根据 addedClass 状态添加来自类状态的 className,我在这里称之为“容器”。我认为这是在反应应用程序中使用状态的基础。只需使用 useState 挂钩,您就可以走很长一段路。从他们的文档中玩耍并了解有关钩子的更多信息!
推荐阅读
- microsoft-translator - 如何使用 MicrosoftTranslatorWidget 按当前位置语言翻译页面
- java - 在 Java 中读取 little-endian 64 位浮点数
- mysql - Sumif 与来自不同表的日期条件
- html - 在窗口内放大/缩小会导致图像重复
- javascript - 如何使用 Jquery 在 Modal 中调用局部视图
- jquery - 使用 JQuery 在 MVC 中检查时如何获取复选框值?
- hadoop - 无法在 HBase 中获取副本 0 的位置
- processing - 如何在圆加工中创建积分系统?
- r - 已编辑:如何为 PostHoc Tukey 测试和多重比较编写循环
- javascript - 服务器上的网站对待文件路径的方式与本地版本不同