首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React - event.target返回上次单击的元素的innerText,而不是当前单击的元素的the

innerText。

React是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式,通过构建可重用的UI组件来实现动态的用户界面。在React中,通过事件处理函数可以获取到事件对象,其中包含了event.target属性,该属性返回触发事件的元素。

event.target返回的是触发事件的元素,而不是当前单击的元素。如果需要获取当前单击的元素的innerText,可以通过event.currentTarget.innerText来获取。

event.currentTarget表示当前正在处理事件的元素,而event.target表示触发事件的元素。在大多数情况下,event.currentTarget和event.target是相同的,但在事件冒泡或事件捕获过程中,它们可能会有所不同。

使用event.currentTarget.innerText可以获取到当前单击的元素的innerText,可以将其用于处理点击事件后的逻辑操作,例如更新UI、发送请求等。

在React中,可以通过以下方式获取当前单击的元素的innerText:

代码语言:txt
复制
function handleClick(event) {
  const currentElementInnerText = event.currentTarget.innerText;
  // 处理当前单击的元素的innerText
}

function MyComponent() {
  return (
    <div onClick={handleClick}>
      Click me
    </div>
  );
}

在上述代码中,当点击<div>元素时,会触发handleClick函数,并通过event.currentTarget.innerText获取到当前单击的元素的innerText。

对于React开发中的事件处理,可以使用React提供的事件绑定方式,也可以使用第三方库如React Router等来处理路由相关的事件。

腾讯云提供了一系列与云计算相关的产品,例如云服务器、云数据库、云存储等。这些产品可以帮助开发者快速构建和部署应用程序,并提供高可用性、可扩展性和安全性。具体的产品介绍和链接地址可以参考腾讯云官方网站:https://cloud.tencent.com/

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

百度地图---获取当前位置返回是汉字显示不是经纬度

这是当前项目的第二个需求,返回当前位置  这个需求在百度地图里面实现很简单,但是出了一大堆乱起八糟错误,错误等到后面的文章再说,先说要获取当前位置怎么做 原理很简单: 第一个需要是的通过  GPS...返回geocode    第二步就是反geo转码得到地址输出来就可以了 实现时候就三个东西: 1.定位器  百度里面称为  LocationClient 2.返回结果监听器 百度里面是 一个接口类  ...BDLocationListener  我们需要去实现他就可以了 3.结果反编译  因为返回结果是经纬度 百度里面是  GeoCoder   只需要用到这三个东西就可以实现获取当前位置,首先我们看看怎么使用百度提供...public MyLocationListener mMyLocationListener;//监听器     public TextView mLocationResult,logMsg;//这是返回结果...option.setLocationMode(tempMode);//可选,默认高精度,设置定位模式,高精度,低功耗,仅设备         option.setCoorType("bd09ll");//可选,默认gcj02,设置返回定位结果坐标系

2.3K40

如何在 React 中点击显示或隐藏另一个组件?

useState 钩子返回一个数组,其中第一个元素当前状态值,第二个元素是更新该状态函数。下面是一个示例,展示如何使用 useState 钩子创建一个用于控制组件可见性状态。...然后,我们在组件返回值中渲染一个按钮和一个条件渲染 div 元素。当用户单击按钮时,onClick 事件处理函数会调用 setIsVisible 函数,并将 !...当用户单击菜单按钮时,菜单应该出现,然后当用户单击菜单外部时,菜单应该消失。下面是一个示例,展示如何使用 React 和事件处理函数来实现菜单显示和隐藏。...然后,我们编写了一个名为 handleClickOutside 事件处理函数,它将检查用户单击元素是否在菜单之外。如果用户单击元素不在菜单中,则将可见性设置为 false,菜单将被隐藏。...然后,我们编写了一个名为 handleClickOutside 事件处理函数,它将检查用户单击元素是否在模态对话框之外。

4.4K10

js事件防止冒泡

事件处理程序中变量event保存着事件对象。event.target属性保存着发生事件目标元素。这个属性是DOM API中规定,可是没有被全部浏览器实现 。...”> ,不是其它后代元素。...如今,单击button不会再折叠样式转换器。单击边框则会触发折叠操作。可是,单击标签相同什么也不会发生,由于它也是一个后代元素。实际上。...单击样式转换器其它地方则能够折叠和扩展整个区域。 3. 默认操作 假设我们把单击事件处理程序注冊到一个锚元素不是一个外层上,那么就要面对另外一个问题:当用户单击链接时。...这样行为与我们讨论事件处理程序不是同一个概念,它是单击元素默认操作。类似地,当用户在编辑完表单后按下回车键时。会触发表单submit事件,在此事件发生后,表单提交才会真正发生。

2.5K40

事件对象使用、属性和方法

1 event.target代表当前触发事件元素,可以通过当前元素对象一系列属性来判断是不是我们想要元素 2 target属性可以是注册事件时元素或者子元素,通常用于比较event.target...和this来确定是不是由于冒泡触发,经常用于事件冒泡时处理事件委托 3 事件对象是用来记录一些事件发生时相关信息对象。...,可以采用要一个技巧来处理,也是常说"事件委托 5 event.type获取事件类型 6 event.pageX 和 event.pageY获取鼠标当前相对于页面的坐标,通过这2个属性,可以确定元素当前页面的坐标值...()阻止事件冒泡,为防止事件冒泡到DOM树上,也就是不触发任何前辈元素事件处理函数 9 event.which获取在鼠标单击时,单击是鼠标的哪个键 10 event.which...3 11 event.currentTarget : 在事件冒泡过程中的当前DOM元素,冒泡前的当前触发事件DOM对象, 等同于this 12 this和event.target区别

1.5K30

jQuery 事件(三) 事件绑定和解绑、对象使用、自定义事件

通常用于比较 event.target 和 this 来确定事件是不是由于冒泡触发。...经常用于事件冒泡时处理事件委托 event.target代表当前触发事件元素,可以通过当前元素对象一系列属性来判断是不是我们想要元素 <!...为防止事件冒泡到DOM树上,也就是不触发任何前辈元素事件处理函数 event.which:获取在鼠标单击时,单击是鼠标的哪个键 event.which 将 event.keyCode 和 event.charCode...DOM元素 冒泡前的当前触发事件DOM对象, 等同于this. this和event.target区别: js中事件是会冒泡,所以this是可以变化,但event.target不会变化,它永远是直接接受事件目标...如果它们不是由目标元素直接触发,那么它就不会进行任何处理 与普通方法返回 jQuery 对象(这样就能够使用链式用法)相反,.triggerHandler() 返回最后一个处理事件返回值。

4K30

React 分析器简介

在此阶段,React 调用 render ,然后将结果与上次渲染结果进行比较。 提交 阶段发生在当 React 应用变化时。...提交展示在分析器顶部附近条形图中: [提交条形图简介] 图表中每个条形表示单个提交,当前选定提交为黑色。 你可以单击条形图(或左/右箭头按钮)来选择其他提交。...在某些情况下,你可能会因为 太多提交 难以处理。 分析器提供了一种过滤机制来帮助实现这一点。 使用它来指定阈值,分析器将隐藏所有比该值 更快 提交。...条形大小和颜色代表渲染该组件及其子组件所需耗时。 (条形宽度代表组件 上次渲染 耗时,颜色代表 当前提交 耗时。)...你可以通过单击右侧详细信息窗格中 "x" 按钮返回上一个图表。

2.9K40

5、React组件事件详解

); 注意:事件回调函数被绑定在React组件上,不是原始元素上,即事件回调函数中 this所指的是组件实例不是DOM元素; 了解更多ReactthisReact组件中this。...单击触发react事件 React不是将click事件绑在该div真实DOM上,而是在document处监听所有支持事件,当事件发生并冒泡至document处时,React...在事件处理程序通过中返回false停止传播,已不可用; 取而代之是需要手动调用e.stopPropagation()或e.preventDefalult()....,不是普通冒泡,并且没有捕获阶段;只有在鼠标指针穿过被选元素时,才会触发。...React合成事件绑定事件触发 父组件React合成事件绑定事件触发 可以看到若不阻止事件传播每次(单击元素)事件触发流程是: Document->子元素(原生事件触发)->父元素(原生事件)->

3.7K10

【前端 · 面试 】JavaScript 之你不一定会基础题(二)

然后,它移动到中单击元素下一个祖先元素,并执行相同操作,然后是单击元素再下一个祖先元素,依此类推,直到到达实际点击元素。...(),没有阻止捕获方法,因为完全没必要。...this 是正在执行事件元素引用,和 event.currentTarget 指向元素是一致,即当前执行是哪个元素监听事件,this 和 event.currentTarget 指向就是哪个元素...总结 上面我们分析了这么多,其实总结起来就下面几条: event.target 指向触发事件流程元素,且不会改变。 this 指向当前所执行事件注册元素。...捕获止于 event.target,冒泡始于 event.target。 主流浏览器都默认在冒泡阶段进行事件注册,所以,只有阻止冒泡方法没有阻止捕获方法。

53510

浅析 JavaScript 中事件委托

点击事件传播分三个阶段: 捕获阶段 —— 从window,document 和根元素开始,事件向下扩散至目标元素祖先 目标阶段 —— 事件在用户单击元素上触发 冒泡阶段——最后,事件冒泡通过目标元素祖先...单击按钮时,父元素侦听器将会捕获冒泡事件(还记得前面所说事件传播吗?)。...该事件侦听器也会对按钮单击做出反应,因为按钮单击事件冒泡通过祖先元素(由于事件传播)。 步骤 3:用 event.target 选择目标元素 单击按钮时,将会用event 对象参数调用处理函数。...现在,你可以看到事件委托模式好处:事件委托仅需要一个事件侦听器,不必像本文最初那样将侦听器附加到每一个按钮上。...使用事件委托需要三个步骤: 确定要监视事件元素父级元素 把将事件侦听器附加到父元素event.target 选择目标元素 ---- 作者:Dmitri Pavlutin 翻译:疯狂技术宅

2.6K30

前端学习(52)~事件委托

事件委托 事件委托,通俗地来讲,就是把一个元素响应事件(click、keydown......)函数委托到另一个元素。...我们希望,只绑定一次事件,即可应用到多个元素上,即使元素是后来添加。 因此,比较好方法就是把这个点击事件绑定到他父层,也就是 ul 上,然后在执行事件函数时候再去匹配判断目标元素。...//如果触发事件对象是我们期望元素,则执行否则不执行 if (event.target && event.target.className...父节点捕获到事件之后,开始执行方法体里内容:通过判断 event.target 拿到了被点击子节点。从而可以获取到相应信息,并作处理。...换而言之,参数为false,说明事件是在冒泡阶段触发(子元素向父元素传递事件)。父节点注册了事件函数,子节点没有注册事件函数,此时,会在父节点中执行函数体里代码。

50010

13事件

(例如单击事件是 click等) functionName:注册事件句柄 事件中this,当使用 addeventlistener()方法为某个HTML页面元素注册事件时候,this就指代注册事件元素...console.log(event.target, event.currentTarget, this) } 属性或方法 描述 target 表示触发当前事件HTML元素 currentTarget...表示注册当前事件HTML元素 srcElement E8及之前版本浏览器支持,表示触发当前事件HTML元素 returnValue E8及之前版本浏览器支持,表示取消当前事件默认行为 cancelBubble...clientX和clientY 表示鼠标在整个可视区域中位置。 ? screenX和screenY 表示鼠标在整个屏幕中位置。从屏幕(不是浏览器)左上角开始计算。 ?...因为注册事件已经委托给了该元素祖先元素完成。 简化逻辑代码 这种方式只需要祖先元素一次注册事件,不需要分别为大量元素注册事件。

74630

JavaScript之Dom、事件,案例

() 根据class属性值获取元素对象们,返回数组 let cls = document.getElementsByClassName("cls"); //alert(cls.length...); //4. getElementsByName() 根据name属性值获取元素对象们,返回数组 let username = document.getElementsByName...子元素对象.parentElement属性 获取当前元素元素 let body = div1.parentElement; alert(body); </html...5.2、添加功能分析 为添加按钮绑定单击事件。 创建 tr 元素。 创建 4 个 td 元素。 将 td 添加到 tr 中。 获取文本框输入信息。 创建 3 个文本元素。...5.5、删除功能实现 //二、删除功能 //1.为每个删除超链接标签添加单击事件属性 //2.定义删除方法 function drop(obj){ //3.获取table元素 let table

1.2K20

jQuery 双击事件(dblclick)时,不触发单击事件(click)

即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick...也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果。不是一次双击事件(dblclick)结果和两次单击事件结果(click)。...//定义setTimeout执行方法 var TimeFn = null; $('div').click(function () { // 取消上次延时未执行方法 clearTimeout...); }); $('div').dblclick(functin () { // 取消上次延时未执行方法 clearTimeout(TimeFn); //双击事件执行代码...}) 从测试结果来看,如果前后两次点击时间在 300ms 左右时候,还是很容易出现 click 和 dblclick 事件被“同时”调用情况,如果间隔时间更短或更长,则只会有 click 或

5.1K30

滴滴前端常考react面试题(附答案)

React中组件是一个函数或一个类,它可以接受输入并返回一个元素。注意:工作中,为了提高开发效率,通常使用JSX语法表示 React元素(虚拟DOM)。...它返回一个 React 元素,是原生 DOM 组件表示。如果需要渲染多个 HTML 元素,则必须将它们组合在一个封闭标记内,例如 、、 等。...因为 React 需要将组件转化为虚拟 DOM 树,所以在编写代码时,实际上是在手写一棵结构树。XML 在树结构描述上天生具有可读性强优势。...一个 会遍历其所有的子 元素,并仅渲染与当前地址匹配第一个元素。...source来进行控制,有如下几种情况:[source]参数不传时,则每次都会优先调用上次保存函数中返回那个函数,然后再调用外部那个函数;[source]参数传[]时,则外部函数只会在初始化时调用一次

2.2K10

腾讯前端必会react面试题合集_2023-02-27

因为 React 要知道当前渲染是组件还是 HTML 元素 受控组件和非受控组件区别是啥?...受控组件是 React 控制中组件,并且是表单数据真实唯一来源。 非受控组件是由 DOM 处理表单数据地方,不是React 组件中。...为此,React将构建一个新 React 元素树(您可以将其视为 UI 对象表示) 一旦有了这个树,为了弄清 UI 如何响应新状态改变,React 会将这个新树与上一个元素树相比较( diff...useState 用法: const [count, setCount] = useState(0) 可以看到 useState 返回是一个数组,那么为什么是返回数组不是返回对象呢?...总结:useState 返回是 array 不是 object 原因就是为了降低使用复杂度,返回数组的话可以直接根据顺序解构,返回对象的话要想使用多次就需要定义别名了。

1.7K20

JavaScript离别之作——HTML元素操作

总结 除了document.getElementById()方法返回是拥有指定id元素外,其他方法返回都是符合要求一个集合。若要获取其中一个对象,可以通过下标的方式获取,默认从0开始。...document对象提供一些属性,可用于获取文档中元素。例如,获取所有表单标签、图片标签等。 document对象body属性用于返回body元素。...querySelector()方法用于返回文档中匹配到指定元素或CSS选择器第1个对象引用。 querySelectorAll()方法用于返回文档中匹配到指定元素或CSS选择器对象集合。...元素对象children属性返回也是对象集合,若要获取其中一个对象,也需通过下标的方式获取,默认从0开始。...③ 单击次数为奇数时,盒子都变大,单击次数为偶数时,盒子都变小。 代码实现 <!

1.1K30

美团前端常见react面试题(附答案)_2023-03-01

时间分片 React 在渲染(render)时候,不会阻塞现在线程 如果你设备足够快,你会感觉渲染是同步 如果你设备非常慢,你会感觉还算是灵敏 虽然是异步渲染,但是你将会看到完整渲染,不是一个组件一行行渲染出来...调和阶段 setState内部干了什么 当调用 setState 时,React会做第一件事情是将传递给 setState 对象合并到组件的当前状态 这将启动一个称为和解(reconciliation...为此,React将构建一个新 React 元素树(您可以将其视为 UI 对象表示) 一旦有了这个树,为了弄清 UI 如何响应新状态改变,React 会将这个新树与上一个元素树相比较( diff...在工作中,更好方式是使用 React组件生命周期之——“存在期”生命周期方法,不是依赖这个回调函数。...source来进行控制,有如下几种情况: [source]参数不传时,则每次都会优先调用上次保存函数中返回那个函数,然后再调用外部那个函数; [source]参数传[]时,则外部函数只会在初始化时调用一次

89030
领券