react入门-点击变色

最新推荐文章于 2024-07-04 20:21:08 发布
最新推荐文章于 2024-07-04 20:21:08 发布
阅读量895 收藏 1
点赞数 3
分类专栏： 前端 react 文章标签： react.js 前端 前端框架 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HHHyyy123_/article/details/129022098
版权
本文介绍了如何在React中处理点击事件。首先创建一个变量来记录点击状态，然后在render方法中解构赋值并绑定到元素上。接着，为需要响应点击的元素添加onClick事件，并使用箭头函数定义点击处理逻辑，修改变量值。在CSS中定义点击后的样式，并通过三元运算符根据变量状态动态设置className，实现元素样式的切换。
摘要由CSDN通过智能技术生成

一、创建变量用来判断是否点击

二、在render解构赋值，把变量取出来

三、给需要点击的元素添加onClick事件

四、在render下面写点击事件函数，这里用箭头函数

五、点击的时候在点击事件里修改变量值

六、在css里写点击后的样式

七、在className使用三元运算判断（join是把数组所有元素转成字符串）

八、完成

不短.
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-native-image-to-pdf:react-native插件可将图像转换为PDF
05-26
入门$ npm install react-native-image-to-pdf --save 或者$ yarn add react-native-image-to-pdf 大多是自动安装$ react-native link react-native-image-to-pdf 手动安装的iOS 在XCode的项目导航器中，右键单击“ ...
button点击后变色_实战项目后对 React Hooks 总结
weixin_35997546的博客
12-22 797
转载自- 掘金 叫我小明呀-《实战项目后对 React Hooks 总结》什么是 useState ？首先 useState 是一个Hook，它允许您将React状态添加到功能组件useState 是一个方法，它本身是无法存储状态的其次，他运行在 FunctionalComponent 里面，本身也是无法保存状态的useState 只接收一个参数 inital value，并看不出有什么...
react实现点击变色小功能
qq_43373622的博客
02-24 4536
方法一：通过className添加类名的方式 当点击实现变色的时候，需要重新使用render函数进行渲染 <style> .isActive { background-color: red; } </style> <body> <div id="app"> </div> <script type="text/babel"> let arr = [1, 2, 3,
实现点击Button，改变背景颜色（多个按钮互斥显示）
最新发布
【爱打盹的喵】的专栏
07-04 591
在界面中，有一组button，现在需要实现下面功能：点击其中一个，改变被点击button的背景颜色。当点击下一个之后，之前点击过的按钮背景颜色还原，当前被点击的button背景色又被改变。效果如下图：当点击了test1，test1的背景色变为了红色。再继续点击test2，test2的背景色变为了红色，而test1的背景色还原。
React实现div点击选择并变色功能
jdhxndbeg的博客
07-07 465
【代码】React实现div点击选择并变色功能。
Hooks demo点击按钮改变文字颜色 (react学习之useContext、useReducer)
MOAN.小M.的博客
08-12 938
Hooks demo点击按钮改变文字颜色 (react学习之useContext、useReducer)
用React Hooks函数式组件实现点击随机切换背景色
m0_64000390的博客
12-28 456
用React Hooks函数式组件实现点击随机切换背景色
react下载-react入门-react.js下载多类库js下载
12-05
react下载-react入门-react.js下载多类库js下载 React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 ...
react-native-matomo:React Native Matomo集成
05-06
用于React Native的Matomo SDK 本文档介绍了如何开始使用Matomo Tracking SDK for React Native。 是领先的开源Web分析平台，可为您提供有关网站访问者，营销... 将node_modules/react-native-matomo/ios/BNFMatomo.xc
react-native-static-server：React Native的HTTP静态文件服务器
02-05
入门$ npm install react-native-static-server --save 安装从react-native 0.60开始，自动链接将负责链接步骤，但不要忘记运行pod install $ react-native link react-native-static-server 用法使用端口声明Static...
点击按钮切换颜色
06-03
这是Android中实现点击按钮然后切换按钮的颜色以及边框
React_Change_text_color:我的第一个用于实践的React应用程序，其中包含3个框，每当单击该框时，它们就会更改框内文本的颜色！
04-10
该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递依赖项（webpack，Babel，ESLint等
react-native-web-webview:React Native用于RN的WebView的Web实现
05-17
react-native-web-webview React Native用于RN的WebView的Web实现 入门 $ npm install react-native-web-webview --save 别名打包您的webpack配置中： resolve: { alias: { 'react-native': 'react-native-web...
react点击实现文字变化
m0_49471668的博客
06-30 612
react
React 组件点击事件
嗯...
10-31 1045
当使用函数组件内的 useState Hook 创建点击事件时，你可以轻松地管理组件的状态。这个箭头函数在函数组件内部的某个函数中定义，然后在按钮的点击事件处理程序中调用它以显示消息。所以，如果你使用React 16.3.0或更新版本，你可以更轻松地使用类属性或箭头函数来处理事件，而不必显式使用。从React 16.3.0开始，类属性和箭头函数的使用变得更加普遍，因为它们使代码更简洁、易读，并且自动绑定了。时，通常是在类组件中，以确保在事件处理程序中访问组件的。函数组件内部的某个函数中使用箭头函数。
react函数组件实现切换主题的效果
weixin_68537886的博客
07-13 183
当我们点击切换主题时，需要进行一个判断，如果颜色的长度大于我们color的长度，就让他显示第一个颜色，否则执行颜色加1操作。存储两个属性，一个用来存储颜列表，另一个是控制第几个颜色的变化，默认是0。给需要变换button按钮绑定active属性。
React Antd Table 点击表的行内容变换背景颜色
blue_stars_的博客
06-14 1285
先设置背景颜色导入一个style.less代码如下：const getRowClassName = (_record: any, index: number) => {let className = 'normal';if (index === key) {className = styles.orange;}return className; }; rowClassName={getRowClassName} onRow={(record: any, rowkey: any) =>
react导航栏点击选中变色
qq_37002224的博客
05-08 3372
1.导航可左右滑动 2.点击变色跳转 在state里面设置navList1数组对象，名称及控制变色的activeColor属性，跳转的路径path this.state = { navList1: [{ id: 0, navName: '办公大楼A', path: '/ParkModal', type: 0, activeColor: fals...
"React入门与create-react-app使用指南
本文将从React的入门开始，介绍create-react-app的使用方法，掌握组件的使用、JSX语法、setState的用法，理解事件处理和组件生命周期，以及掌握组件间通信的各种方式。 首先，入门React可以通过使用create-react-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值