React添加或移除类的操作方法
作者：火焰兔
这篇文章主要介绍了React添加或移除类的操作方法，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
useState
在React中，通过点击事件来添加或者移除类：
- 在元素上设置
onClick属性。 - 将活动状态存储在
state变量中。 - 使用三元操作符有条件的添加类。
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;
}
另外，你也可以使用event对象以编程方式添加或删除类。
event
在React中，通过点击事件来添加或者移除类：
- 在元素上设置
onClick属性。 - 使用
event.currentTarget访问DOM元素。 - 使用
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属性让我们可以访问事件监听器所连接的元素。而event的target属性给了我们一个对触发事件的元素的引用（可以是一个后代）。
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添加或移除类的文章就介绍到这了,更多相关react添加或移除类内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！