如何在 css “ClassName” 和 React 中添加和删除类？

Question

我正在学习 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");
});

这些类所做的是根据用户按下的按钮显示登录或唱歌

在此先感谢可以帮助我的人

Answer 1

正如 Charlietfl 所提到的，您向我们展示的普通 js 代码无法正常工作，因为它们会相互抵消。

对于你的反应问题：我首先建议你开始理解状态，正如罗宾提到的。 如果你有某种状态，让我们说两种状态：

const [addedClass, setAddedClass] = useState(false);
const [class, setClass] = useState('container');

现在，您在这里有一个布尔值来处理 onClick 事件，用作添加类“容器”的条件。 就像是：

const handleClick = () => {
 setAddedClass(prev => !prev)
}

所以，如果你有一个 div 并且你想添加容器 className，你可以使用 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 将添加类状态中的 className，我在此处将其称为“容器”，基于 addedClass 状态。 我认为这是在 React 应用程序中使用状态的基础。 仅使用 useState 钩子就可以走很长的路。 玩转并从他们的文档中了解有关钩子的更多信息！