React改变元素样式的操作代码
三元运算符
在React中，通过点击事件来改变元素的样式：
- 在元素上设置
onClick属性。 - 当元素被点击时，设置激活的
state。 - 使用三元运算符，基于
state变量有条件地设置新样式。
import {useState} from 'react';
export default function App() {
const [isActive, setIsActive] = useState(false);
const handleClick = () => {
// ?️ toggle
setIsActive(current => !current);
// ?️ or set to true
// setIsActive(true);
};
return (
<div>
<button
style={{
backgroundColor: isActive ? 'salmon' : '',
color: isActive ? 'white' : '',
}}
onClick={handleClick}
>
Click
</button>
</div>
);
}我们在元素上设置了onClick 属性，所以每当元素被点击时，handleClick函数就会被调用。在该函数中，我们只是切换isActive状态。
如果你不想在每次点击元素时改变样式，你可以将状态设置为激活，例如
setIsActive(true)。
我们使用三元运算符，有条件地在元素上设置backgroundColor 样式。
<button
style={{
backgroundColor: isActive ? 'salmon' : '',
color: isActive ? 'white' : '',
}}
onClick={handleClick}
>
Click
</button>三元运算符与if/else 语句十分相似。换句话说，如果isActive 变量值为true，我们会设置backgroundColor属性为salmon，否则设置为空字符串。
你可以用这种方法来改变组件中任何元素的样式，它不一定是用户点击的那个。
currentTarget
同样的，你可以使用event对象上的currentTarget属性。
- 在元素上设置
onClick属性。 - 在事件处理函数中，通过
event.currentTarget访问元素。 - 在元素上使用
style对象设置样式。
export default function App() {
const handleClick = event => {
event.currentTarget.style.backgroundColor = 'salmon';
event.currentTarget.style.color = 'white';
event.currentTarget.classList.add('my-class-1', 'my-class-2');
};
return (
<div>
<button onClick={handleClick}>Click</button>
</div>
);
}我们可以通过event对象上的currentTarget属性来访问元素。event上的currentTarget属性让我们可以访问事件监听器所连接的元素。
下面的示例向我们展示了，如何通过点击事件改变元素上的样式。
export default function App() {
const handleClick = event => {
// ?️ toggle styles on click
if (event.currentTarget.style.backgroundColor) {
event.currentTarget.style.backgroundColor = null;
event.currentTarget.style.color = null;
} else {
event.currentTarget.style.backgroundColor = 'salmon';
event.currentTarget.style.color = 'white';
}
// ?️ toggle class on click
event.currentTarget.classList.toggle('my-class-1', 'my-class-2');
};
发。
return (
<div>
<button onClick={handleClick}>Click</button>
</div>
);
}如果你需要在点击时为元素设置一个样式，你可以直接通过元素的style对象设置样式。
event.currentTarget.style.backgroundColor = 'salmon';
然而，如果你必须在每次点击元素时切换样式，你就必须有条件地检查该类是否存在，如果存在就将其删除，否则就添加该类。
如果你需要为元素添加样式，可以使用classList.add方法。
// ?️ add class
event.currentTarget.classList.add('my-class-1', 'my-class-2');
// ?️ remove class
event.currentTarget.classList.remove('my-class-1', 'my-class-2');该方法可以可以传递一个或多个class。
如果你需要在点击时为元素切换样式，可以使用classList.toggle方法。
event.currentTarget.classList.toggle('my-class-1', 'my-class-2');classList.toggle方法从元素中移除一个现有的类，如果该类存在的话。否则，它会将该类添加到该元素中。
到此这篇关于React技巧之改变元素样式的文章就介绍到这了,更多相关react改变元素样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
react hooks d3实现企查查股权穿透图结构图效果详解
这篇文章主要为大家介绍了react hooks d3实现企查查股权穿透图结构图效果详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
Reducer是个纯函数，即只要传入相同的参数，每次都应返回相同的结果。不要把和处理数据无关的代码放在Reducer里，让Reducer保持纯净，只是单纯地执行计算，这篇文章主要介绍了Redux拆分reducer函数流程2022-09-09
React slick是一个使用React构建的轮播组件,下面这篇文章主要给大家介绍了关于react基于react-slick实现多图轮播效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了React+umi+typeScript创建项目的过程,结合代码介绍了项目框架搭建的方式，本文给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
React无限滚动插件react-infinite-scroll-component的配置优化技巧
react-infinite-scroll-component是React无限滚动插件,简化滚动加载逻辑,支持自定义提示和触发距离,兼容移动端,体积小巧,适用于列表、聊天等场景,需结合虚拟滚动优化性能,本文介绍React无限滚动插件react-infinite-scroll-component的配置+优化,感兴趣的朋友一起看看吧2025-09-09
本篇文章主要介绍了react 父组件与子组件之间的值传递的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
React的事件系统和浏览器事件系统相比,主要增加了两个特性：事件代理、和事件自动绑定,本文主要介绍了React 组件中实现事件代理,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
解决React报错Cannot find namespace context
这篇文章主要为大家介绍了React报错Cannot find namespace context分析解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
Remix后台开发之remix-antd-admin配置过程
这篇文章主要为大家介绍了Remix后台开发之remix-antd-admin配置过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
在create-react-app中使用css modules的示例代码
这篇文章主要介绍了在create-react-app中使用css modules的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
最新评论