chuckQu

V1

2022/06/19阅读:16主题:凝夜紫

React技巧之添加或移除类

原文链接:https://bobbyhadz.com/blog/react-add-remove-class-on-click

作者:Borislav Hadzhiev

正文从这开始~

useState

在React中,通过点击事件来添加或者移除类:

  1. 在元素上设置onClick属性。
  2. 将活动状态存储在state变量中。
  3. 使用三元操作符有条件的添加类。
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>

  );
}

下面是示例中的css。

.bg-salmon {
  background-color: salmon;
  color: white;
}
add-remove-class-on-click.gif
add-remove-class-on-click.gif

另外,你也可以使用event对象以编程方式添加或删除类。

event

在React中,通过点击事件来添加或者移除类:

  1. 在元素上设置onClick属性。
  2. 使用event.currentTarget访问DOM元素。
  3. 使用classList.add() 或者 classList.remove() 方法。
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>

  );
}

我们在button元素上设置了onClick属性,因此每当元素被点击时,handleClick函数就会被调用。我们可以通过event对象上的currentTarget属性访问元素。

event上的currentTarget属性让我们可以访问事件监听器所连接的元素。而eventtarget属性给了我们一个对触发事件的元素的引用(可以是一个后代)。

toggle

该示例向我们展示了,如何使用classList.toggle 方法来切换类。

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

classList.toggle方法从元素中移除一个现有的类,如果该类存在的话。否则,它会将该类添加到该元素中。如有必要,你可以在toggle() 方法上传递多个类。

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

add

如果你需要通过点击事件为元素添加类,可以使用classList.add 方法。

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

如果指定的类已存在于元素上,classList.add() 方法不会重复添加。

remove

如果你需要从元素中移除类,使用classList.remove 方法。

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

如果元素上不存在指定的类,classList.remove() 方法会忽略该类。否则会从元素的类列表中移除该类。

分类:

前端

标签:

React.js

作者介绍

chuckQu
V1