在 React 中点击切换一个类

作者

在 React 中点击切换类

Toggle a class on click in React

要在 React 中点击切换一个类：

  1. onClick在元素上设置道具。
  2. 将活动状态存储在状态变量中。
  3. 使用三元运算符有条件地添加类。
应用程序.js
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示例。

应用程序.css
.bg-salmon {
  background-color: salmon;
  color: white;
}

单击切换类

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

我们onClick在按钮元素上设置了 prop，所以每次单击它时，handleClick都会调用该函数。

在我们的handleClick函数中，我们只是切换isActive布尔值。

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

应用程序.js
<button className={isActive ? 'bg-salmon' : ''} onClick={handleClick}>
  Click
</button>

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

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

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

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

应用程序.js
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属性访问元素event
。

上的currentTarget属性event使我们可以访问事件侦听器附加到的元素。

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

classList.toggle
方法从元素
中删除一个现有的类（如果该类存在）。否则，它将类添加到元素。

–

发表评论