vue 获取当前元素的父元素_react获取触发元素的属性 e.target.dataset

我的react项目中一个应用场景就是在点击一个元素的时候想要获取到这个元素的属性。

代码如下:

renderyear=()=>{return(<div><div data-value="年初">年初</div> </div>);}//点击标签的时候触发的函数
TagClick=(e)=>{console.log("e",e);console.log("e.target",e.target); //指向返回事件的目标节点(触发该事件的节点)console.log("e.target.dataset",e.target.dataset);this.setState({tagSelect:e.target.dataset.value,Pickerstatus:false,});}

如果想获取到触发元素的属性,需要两步骤:

1需要在触发元素上用“data-”+“属性”的形式定义,如value值写成data-value,calss值写成data-class

2.通过e.target.dataset.属性能够获取属性

6a35be7360030c95f525c9e938c67195.png

如上图:
我在方法中分别打印出来了e,e.target,e.target.dataset

e是事件对象,里面包括很多方法

e.target指向返回事件的目标节点(触发该事件的节点)

e.target.dataset返回一个对象,对象中是设置的属性,如果设置的时候不加data,则获取到的对象为空。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/535042.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

为什么要学Redis(NoSQL数据库)

各位小伙伴们大家好&#xff0c;欢迎来到这个小扎扎的Redis 6专栏&#xff0c;在这个系列专栏中我对B站尚硅谷的Redis教程进行一个总结&#xff0c;鉴于 看到就是学到、学到就是赚到 精神&#xff0c;这波依然是血赚 ┗|&#xff40;O′|┛ &#x1f4a1;Redis知识点速览&…

centos常用命令_二、Docker镜像是什么?Docker常用命令

科技奇闻 关注让你我共同进步文章来源&#xff1a;CSDN作者&#xff1a;IronmanJayDocker常用命令1.帮助命令docker version #查看版本号docker info #显示Docker系统信息&#xff0c;包括镜像和容器数docker --help #查看Docker有哪些命令…

实现定时中断_无线传感器网络实验报告(二)Timer定时应用实验

实验二&#xff1a; Timer定时应用实验2.1实验目的1. 认识并了解 CC2530 定时器&#xff1b; 2. 学习定时器的基本配置与应用&#xff1b; 3. 在 ZigBee 模块上运行定时器程序。2.2实验原理根据数据手册可知 CC2530 总共有 4 个定时器&#xff0c;但是定时器 2 被系统占用&…

详析java中的关键字和权限修饰

&#x1f4a1;涉及的知识点速通&#x1f6eb; 关于关键字你都知道什么?&#x1fa82; this和super关键字&#x1fa82; instanceof关键字&#x1fa82; static关键字&#x1fa82; final关键字&#x1f6eb; 权限修饰符的作用范围知多少?各位小伙伴们大家好&#xff0c;欢迎来…

JQ 全选后获取选中的值_Filecoin如何创建账户钱包并获取FIL测试币

昨天"猩动力节点"加入了fielcoin的测试网络&#xff0c;对用户或者矿工来说&#xff0c;如何获取代币&#xff0c;创建钱包保护好自己的资产&#xff0c;每一个用户来说都很关心。下面我们一起来学习如何创建账户钱包&#xff0c;并获取FIL 测试代币。在创建账户钱包…

Redis中 字符串的常用命令

各位小伙伴们大家好&#xff0c;欢迎来到这个小扎扎的Redis 6专栏&#xff0c;在这个系列专栏中我对B站尚硅谷的Redis教程进行一个总结&#xff0c;鉴于 看到就是学到、学到就是赚到 精神&#xff0c;这波依然是血赚 ┗|&#xff40;O′|┛ &#x1f4a1;Redis知识点速览&…

mac wmware 无网络_无线网络中常用的技术名词

1、LAN&#xff1a;即局域网&#xff1a;是路由和主机组成的内部局域网&#xff0c;一般为有线网络。2、WAN&#xff1a;即广域网&#xff1a;是外部一个更大的局域网。3、WLAN(Wireless LAN&#xff0c;即无线局域网)&#xff1a;前面我们说过LAN是局域网&#xff0c;其实大多…

python界面开发webview_python在webview和activity混合页面下怎么定位

展开全部 genymotion 模拟器&#xff1a;android 5.0.0 python 2.7 appium 1.4.16.1 1、app原生元素定位&#xff08;常用&#xff09; driver.find_element_by_id(“resourse-id”32313133353236313431303231363533e59b9ee7ad9431333363393662) driver.find_element_by_name(“…

androidstudio build tools安装_Android Studio4.0 安装及配置

本来打算十一月份写的&#xff0c;结果。。。就在我备注原来的文章的时候&#xff0c;硬盘坏了。。。所以重新配置环境。。。换硬盘&#xff0c;。。。坏的太突然以至于数据都没有备份。。。。建议大家在参考教程安装之前先大致浏览一遍&#xff0c;这样安装的时候就会大致知道…

Redis 五大数据类型的常用命令——列表、集合、哈希、有序集合

各位小伙伴们大家好&#xff0c;欢迎来到这个小扎扎的Redis 6专栏&#xff0c;在这个系列专栏中我对B站尚硅谷的Redis教程进行一个总结&#xff0c;鉴于 看到就是学到、学到就是赚到 精神&#xff0c;这波依然是血赚 ┗|&#xff40;O′|┛ &#x1f4a1;Redis知识点速览&…

aop注解配置切点 spring_springboot aop 自定义注解方式实现一套完善的日志记录

一&#xff1a;功能简介本文主要记录如何使用aop切面的方式来实现日志记录功能。主要记录的信息有: 操作人&#xff0c;方法名&#xff0c;参数&#xff0c;运行时间&#xff0c;操作类型(增删改查)&#xff0c;详细描述&#xff0c;返回值。二&#xff1a;项目结构图如果想学习…

抽象类、接口的区别和相似点

各位小伙伴们大家好&#xff0c;欢迎来到这个小扎扎的《Java核心技术 卷Ⅰ》笔记专栏&#xff0c;在这个系列专栏中我将记录浅学这本书所得收获&#xff0c;鉴于 看到就是学到、学到就是赚到 精神&#xff0c;这波简直就是血赚 &#x1f4a1;涉及的知识点速通&#x1f6eb; abs…

c标签判断true false jsp_Java学习知识点:小白如何掌握JSP技术?

今天千锋广州小编就给大家分享零基础如何掌握JSP技术&#xff0c;下面一起来看看吧!一、Java初级开发之jsp概述1.关于jspJavaServer Pages简称jsp&#xff0c;从“server”这个词可以看出&#xff0c;这其实也是一门java服务端技术&#xff0c;其实可以简单的把jsp认为是servle…

python语言保留字的特点_python保留字及其说明

原博文 2019-07-14 22:05 − 保留字 说 明 and 用于表达式运算&#xff0c;逻辑与操作 as 用于类型转换 assert 断言&#xff0c;用于判断变量或条件表达式的值是否为真 break 中断循环语句的执行 class 用于定义类 continue 继续执行下一次循环 ...011647 相关推荐 2019-12-19…

使用Java操作Redis的两种方式Jedis、RedisTemplate

各位小伙伴们大家好&#xff0c;欢迎来到这个小扎扎的Redis 6专栏&#xff0c;在这个系列专栏中我对B站黑马的Redis教程进行一个总结&#xff0c;鉴于 看到就是学到、学到就是赚到 精神&#xff0c;这波依然是血赚 ┗|&#xff40;O′|┛ &#x1f4a1;Redis知识点速览&#…

python提取数据库数据_Python如何读取MySQL数据库表数据

本文实例为大家分享了Python读取MySQL数据库表数据的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下 环境&#xff1a;Python 3.6 ,Window 64bit 目的&#xff1a;从MySQL数据库读取目标表数据&#xff0c;并处理 代码&#xff1a; # -*- coding: utf-8 -*- import p…

【项目实战】基于Redis实现短信验证码登录 (附源码、思路)

各位小伙伴们大家好&#xff0c;欢迎来到这个小扎扎的Redis 6专栏&#xff0c;在这个系列专栏中我对B站黑马的Redis教程进行一个总结&#xff0c;鉴于 看到就是学到、学到就是赚到 精神&#xff0c;这波依然是血赚 ┗|&#xff40;O′|┛ &#x1f4a1;Redis知识点速览&#…

加工中心刻字宏程序_FANUC OI系列图书——车床、铣床及加工中心编程

☞ 这是金属加工(mw1950pub)发布的第10035篇文章导读今天跟大家分享FANUC OI系列图书&#xff0c;包括车床、铣床及加工中心编程&#xff0c;快来看看吧&#xff01;《FANUC 0i数控车床/加工中心编程技巧与实例》选择在企业里应用*广泛、编程*具代表性的日本FANUCSeries0i-TC/T…

Redis 的缓存策略

各位小伙伴们大家好&#xff0c;欢迎来到这个小扎扎的Redis 6专栏&#xff0c;在这个系列专栏中我对B站黑马的Redis教程进行一个总结&#xff0c;鉴于 看到就是学到、学到就是赚到 精神&#xff0c;这波依然是血赚 ┗|&#xff40;O′|┛ &#x1f4a1;Redis知识点速览&#…

关闭后天 树莓派_陪你一起玩树莓派-系统安装

从今天就开始我们的树莓派之旅&#xff0c;心情是不是有点小激动&#xff1f;我们拿到一个树莓派是一个裸机。我们要准备一张16G的高速TF闪存卡&#xff0c;一个5V/2A的USB电源和一根micro B的 usb线。装机步骤&#xff1a;一、下载树莓派系统1、浏览器打开树莓派官方网站 http…