在 React 中单击时切换一个类

re要在 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;
}

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

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

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

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

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

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 在 React 中单击时切换一个类