在 React 中单击时切换一个类

React 2年前 74

re要在 React 中单击时切换类：

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

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

在 React 中单击时切换一个类

我们在 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>
  );
}