如何在 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 鈎子就可以走很長的路。 玩轉並從他們的文檔中了解有關鈎子的更多信息！