Hướng dẫn add and remove css class react - thêm và xóa lớp phản ứng css

Question

Tôi mới phản ứng. Tôi có một vài nút trong một nhóm nút:

Nội dung chính Show

Thêm hoặc xóa một lớp khi nhấp vào React #
Làm thế nào để bạn thêm và xóa lớp CSS trong React?
Làm cách nào để loại bỏ thuộc tính CSS trong React?
Bạn có thể thêm CSS để phản ứng không?
Làm thế nào để bạn nối một lớp học trong React?

<div className="btn-group">
    <button className="btn btn-mini btn-default" onClick={() => this.changeDataType("type1")} >Button1</button>
    <button className="btn btn-mini btn-default" onClick={() => this.changeDataType("type2")} >Button2</button>
    <button className="btn btn-mini btn-default" onClick={() => this.changeDataType("type3")} >Button3</button>
</div>

Bất cứ khi nào người dùng nhấp vào một trong các nút, nút này sẽ trở thành nút được chọn, được chọn. Tôi phát hiện ra rằng tôi cần thêm lớp CSS active vào nút tương ứng, nhưng tôi không chắc chắn làm thế nào để thực hiện điều này.

Tôi đã nghĩ về điều này một chút. Tôi có chức năng changeDataType được kết nối với các nút của tôi, trong đó tôi làm một số thứ khác. Sau đó, tôi có thể điều khiển CSS không?

Vì vậy, tôi đoán câu hỏi của tôi là trước tiên, làm thế nào để nhắm mục tiêu nút tôi cần nhắm mục tiêu và thứ hai, làm thế nào tôi có thể thay đổi CSS của nút đó bằng React.

Thêm hoặc xóa một lớp khi nhấp vào React #

Để thêm hoặc xóa một lớp khi nhấp vào React:

Đặt prop

Copied!
import {useState} from 'react';
import './App.css';

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

  const handleClick = event => {
    // 👇️ toggle isActive state on click
    setIsActive(current => !current);
  };

  return (
    <div>
      <button className={isActive ? 'bg-salmon' : ''} onClick={handleClick}>
        Click
      </button>
    </div>
  );
}

0 trên phần tử.

Lưu trữ trạng thái hoạt động trong một biến trạng thái.
Có điều kiện thêm lớp bằng toán tử ternary.

Copied!
import {useState} from 'react';
import './App.css';

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

  const handleClick = event => {
    // 👇️ toggle isActive state on click
    setIsActive(current => !current);
  };

  return (
    <div>
      <button className={isActive ? 'bg-salmon' : ''} onClick={handleClick}>
        Click
      </button>
    </div>
  );
}

Và đây là

Copied!
import {useState} from 'react';
import './App.css';
export default function App() {
const [isActive, setIsActive] = useState(false);
const handleClick = event => {
// 👇️ toggle isActive state on click
setIsActive(current => !current);
};
return (
<div>
<button className={isActive ? 'bg-salmon' : ''} onClick={handleClick}>
Click
</button>
</div>
);
}

1 cho ví dụ.

Copied!
.bg-salmon {
  background-color: salmon;
  color: white;
}

Ngoài ra, bạn có thể lập trình thêm hoặc xóa một lớp bằng đối tượng

Copied!
import {useState} from 'react';
import './App.css';

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

  const handleClick = event => {
    // 👇️ toggle isActive state on click
    setIsActive(current => !current);
  };

  return (
    <div>
      <button className={isActive ? 'bg-salmon' : ''} onClick={handleClick}>
        Click
      </button>
    </div>
  );
}

2.

Để thêm hoặc xóa một lớp khi nhấp vào React:

Đặt prop

Copied!
import {useState} from 'react';
import './App.css';

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

  const handleClick = event => {
    // 👇️ toggle isActive state on click
    setIsActive(current => !current);
  };

  return (
    <div>
      <button className={isActive ? 'bg-salmon' : ''} onClick={handleClick}>
        Click
      </button>
    </div>
  );
}

0 trên phần tử.

Lưu trữ trạng thái hoạt động trong một biến trạng thái.
Có điều kiện thêm lớp bằng toán tử ternary.

Copied!
import './App.css';

export default function App() {
  const handleClick = event => {
    // 👇️ toggle class on click
    event.currentTarget.classList.toggle('bg-salmon');

    // 👇️ add class on click
    // event.currentTarget.classList.add('bg-salmon');

    // 👇️ remove class on click
    // event.currentTarget.classList.remove('bg-salmon');
  };

  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

Và đây là

Copied!
import {useState} from 'react';
import './App.css';

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

  const handleClick = event => {
    // 👇️ toggle isActive state on click
    setIsActive(current => !current);
  };

  return (
    <div>
      <button className={isActive ? 'bg-salmon' : ''} onClick={handleClick}>
        Click
      </button>
    </div>
  );
}

1 cho ví dụ.

Ngoài ra, bạn có thể lập trình thêm hoặc xóa một lớp bằng đối tượng

Copied!
import {useState} from 'react';
import './App.css';

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

  const handleClick = event => {
    // 👇️ toggle isActive state on click
    setIsActive(current => !current);
  };

  return (
    <div>
      <button className={isActive ? 'bg-salmon' : ''} onClick={handleClick}>
        Click
      </button>
    </div>
  );
}

2.

Truy cập phần tử DOM là

Copied!
import {useState} from 'react';
import './App.css';

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

  const handleClick = event => {
    // 👇️ toggle isActive state on click
    setIsActive(current => !current);
  };

  return (
    <div>
      <button className={isActive ? 'bg-salmon' : ''} onClick={handleClick}>
        Click
      </button>
    </div>
  );
}

4.

Sử dụng các phương pháp

Copied!
import {useState} from 'react';
import './App.css';

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

  const handleClick = event => {
    // 👇️ toggle isActive state on click
    setIsActive(current => !current);
  };

  return (
    <div>
      <button className={isActive ? 'bg-salmon' : ''} onClick={handleClick}>
        Click
      </button>
    </div>
  );
}

5 hoặc

Copied!
import {useState} from 'react';
import './App.css';

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

  const handleClick = event => {
    // 👇️ toggle isActive state on click
    setIsActive(current => !current);
  };

  return (
    <div>
      <button className={isActive ? 'bg-salmon' : ''} onClick={handleClick}>
        Click
      </button>
    </div>
  );
}

6.

Ví dụ cho thấy cách chuyển đổi một lớp bằng phương thức classList.toggle.

Copied!
event.currentTarget.classList.toggle('bg-salmon');

Phương thức

Copied!
.bg-salmon {
  background-color: salmon;
  color: white;
}

5 sẽ loại bỏ một lớp hiện có khỏi phần tử nếu lớp có. Nếu không, nó thêm lớp vào phần tử.

Bạn có thể chuyển càng nhiều lớp cho phương thức

Copied!
.bg-salmon {
  background-color: salmon;
  color: white;
}

6 khi cần thiết.

Copied!
event.currentTarget.classList.toggle(
  'bg-salmon',
  'my-class-2',
  'my-class-3',
);

Nếu bạn cần thêm một lớp vào phần tử trên nhấp chuột, hãy sử dụng phương thức ClassList.Add.

Copied!
event.currentTarget.classList.add(
  'bg-salmon',
  'my-class-2',
  'my-class-3',
);

Phương thức

Copied!
import {useState} from 'react';
import './App.css';

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

  const handleClick = event => {
    // 👇️ toggle isActive state on click
    setIsActive(current => !current);
  };

  return (
    <div>
      <button className={isActive ? 'bg-salmon' : ''} onClick={handleClick}>
        Click
      </button>
    </div>
  );
}

5 sẽ không thêm lớp lần thứ hai nếu nó đã có trên phần tử.

Nếu bạn cần xóa một lớp khỏi một phần tử, hãy sử dụng phương thức ClassList.Remove.

Copied!
event.currentTarget.classList.remove(
  'bg-salmon',
  'my-class-2',
  'my-class-3',
);

Phương thức

Copied!
import {useState} from 'react';
import './App.css';

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

  const handleClick = event => {
    // 👇️ toggle isActive state on click
    setIsActive(current => !current);
  };

  return (
    <div>
      <button className={isActive ? 'bg-salmon' : ''} onClick={handleClick}>
        Click
      </button>
    </div>
  );
}

6 bỏ qua lớp nếu nó không có trên phần tử, nếu không, nó sẽ loại bỏ lớp khỏi danh sách lớp của phần tử.

Làm thế nào để bạn thêm và xóa lớp CSS trong React?

Để thêm hoặc xóa một lớp khi nhấp vào React:..

Đặt onclick prop trên phần tử ..

Truy cập phần tử DOM như sự kiện.Mục tiêu hiện tại ..

Sử dụng danh sách lớp.thêm () hoặc danh sách lớp.loại bỏ () phương thức ..

Làm cách nào để loại bỏ thuộc tính CSS trong React?

Chúng ta có thể xóa các thuộc tính CSS khỏi một đối tượng bằng cách đặt thành một chuỗi trống hoặc gọi phương thức removeProperty.setting to an empty string or calling the removeProperty method.

Bạn có thể thêm CSS để phản ứng không?

Bạn có thể tạo một tệp CSS mới trong thư mục dự án của mình và thêm CSS của bạn bên trong nó.Sau đó, bạn có thể nhập nó vào trang thành phần, lớp hoặc React JS của bạn.create a new CSS file in your project directory and add your CSS inside it. You can then import it in your component, class or React JS page.