Tôi mới phản ứng. Tôi có một vài nút trong một nhóm nút:
<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!
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! Copied!
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ử.