迹忆客 专注技术分享

要在 React 中单击时切换类：

1. 在元素上设置 onClick 属性。
2. 将活动状态存储在状态变量中。
3. 使用三元运算符有条件地添加类。

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

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

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

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

这是 css 的示例。

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

我们在 useState 钩子中将 isActive 变量的状态初始化为 false。

我们在 button 元素上设置了 onClick 属性，所以每次点击都会调用 handleClick 函数。

在我们的 handleClick 函数中，我们简单地切换 isActive 布尔值。

我们使用三元运算符有条件地将类添加到元素中。

<button className={isActive ? 'bg-salmon' : ''} onClick={handleClick}>
  Click
</button>

三元运算符与 if/else 语句非常相似。

它检查问号左边的值是否为真，如果是，则运算符返回冒号左边的值，否则返回右边的值。

换句话说，如果 isActive 变量存储了一个真值，我们将 bg-salmon 类添加到元素中，否则返回一个空字符串。

或者，我们可以使用 classList.toggle() 方法来切换元素上的类。

import './App.css';

export default function App() {
  const handleClick = event => {

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

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

我们可以通过事件对象的 currentTarget 属性访问元素。

事件的 currentTarget 属性使我们能够访问事件监听器附加到的元素。

而事件的目标属性为我们提供了对触发事件的元素的引用（可能是后代）。

如果类存在，classList.toggle 方法会从元素中删除现有类。 否则，它将类添加到元素。