React添加或移除类的操作方法

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>
  );
}

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

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>
  );
}

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

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

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

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