Cách thêm và remove class trong React

Trong hướng dẫn này, chúng ta sẽ tìm hiểu về cách tự động chuyển đổi các lớp trong ứng dụng React.

Toggling the class

Để chuyển đổi một lớp, chúng ta cần sử dụng giá trị boolean trong biểu thức bậc ba.

  • Nếu giá trị boolean là true, tên lớp sẽ được thêm vào phần tử phản ứng.
  • Nếu giá trị boolean là false, tên lớp sẽ bị xóa khỏi phần tử phản ứng.

Dưới đây là một ví dụ sử dụng các phản ứng, bổ sung tên lớp app vào phần tử div khi chúng ta nhấp vào nút Toggle class. Nếu chúng ta nhấp vào nút đó một lần nữa, tên lớp sẽ bị xóa khỏi phần tử div.

/* App.js */
import React, { useState } from "react";import "./styles.css";

export default function App() {
  const [isActive, setActive] = useState("false");
  const handleToggle = () => {
    setActive(!isActive);  };
  return (
    <div className={isActive ? "app" : null}>      <h1>Hello react</h1>
      <button onClick={handleToggle}>Toggle class</button>    </div>
  );
}
Trong các thành phần dựa trên lớp, bạn có thể làm như thế này.

/* App.js */
import React, { Component } from "react";
import "./styles.css";

class App extends Component {
  state = { isActive: false };
  handleToggle = () => {
    this.setState({ isActive: !this.state.isActive });  };

  render() {
    const isActive = this.state.isActive;
    return (
      <div className={isActive ? "app" : null}>        <h1>Hello react</h1>
        <button onClick={this.handleToggle}>Toggle class</button>      </div>
    );
  }
}

export default App;

Toggle giữa 2 class

Thay vì thêm hoặc xóa tên lớp, chúng ta cũng có thể chuyển đổi giữa hai tên lớp trong ứng dụng phản ứng.

Trong ví dụ dưới đây, theo mặc định, lớp vùng chứa container được thêm vào phần tử div, khi chúng ta nhấp vào nút Toggle class lớp vùng chứa container sẽ bị xóa, lớp ứng dụng  app được thêm vào phần tử.

/* App.js */
import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [isActive, setActive] = useState("false");

  const handleToggle = () => {
    setActive(!isActive);
  };
  return (
    <div className={isActive ? "app" : "container"}>      <h1>Hello react</h1>
      <button onClick={handleToggle}>Toggle class</button>
    </div>
  );
}

Thêm 1 classname vào tên lớp hiện có

Bạn cũng có thể thêm tên lớp mới vào tên lớp hiện có như thế này.

/* App.js */
import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [isActive, setActive] = useState("false");

  const handleToggle = () => {
    setActive(!isActive);
  };
  return (
    <div className={`app ${isActive ? "danger" : ""}`}>      <h1>Hello react</h1>
      <button onClick={handleToggle}>Toggle class</button>
    </div>
  );
}

html được output ra như bên dưới

/* OUTPUT HTML */
<div class="app">
   <h1>Hello react</h1>
   <button>Toggle class</button>
</div>

Sau khi nhấp vào nút Toggle class html trông như thế này.

/* html */
<div class="app danger">   
   <h1>Hello react</h1>
   <button>Toggle class</button>
</div>


Đã đăng trong Code Snippets, React.