在 React 中单击添加或删除类

Add or Remove a Class on click in React

在 React 中点击添加或删除类：

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

应用程序.js


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示例。

应用程序.css


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

单击添加删除类

event
或者，您可以使用该对象以编程方式添加或删除类。

在 React 中点击添加或删除类：

onClick在元素上设置道具。
访问 DOM 元素作为event.currentTarget.
使用classList.add()或classList.remove()方法。

应用程序.js


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

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

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

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

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

该示例显示了如何使用
classList.toggle
方法切换类。

应用程序.js


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

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

您可以根据需要将尽可能多的类传递给该toggle()方法。

应用程序.js


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

如果需要在单击时向元素添加类，请使用
classList.add
方法。

应用程序.js


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

如果该类已经存在于元素上，则该classList.add()方法不会再次添加该类。

如果需要从元素中删除类，请使用
classList.remove
方法。

应用程序.js


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

如果该类不存在于元素中，该classList.remove()方法将忽略该类，否则它将从元素的类列表中删除该类。

–