React中bind以及this处理,获取当前操作的元素

最新推荐文章于 2022-08-19 23:36:33 发布
原创 最新推荐文章于 2022-08-19 23:36:33 发布 · 4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何通过点击事件获取当前DOM元素，并详细解释了如何使用bind方法来处理事件，确保能够正确地引用目标DOM元素。同时探讨了函数参数设置的重要性，确保能够有效地访问和操作DOM。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >



1.点击发送的点击事件获取当前的dom元素,利用的上图中bind.第一个参数是当前操作的this,后面就是函数中需要用到的参数,这个根据应用场景确定的.

2.这函数中的打印的顺序就会发生变化,当前的对象总是放在函数的参数的最后一个进行输出.这样既可以获取想要的Dom,


一个橘子a
关注
49.React学习 —— 组件(props)、状态(state)、this指向、ref
Kylincsg的博客
02-19 1109
1.React的组件（函数与类）； 2.组件的状态state； 3.this的指向问题； 4.组件传递数据props； 5.表单处理（受控组件与非受控组件）
react当中的this指向
最新发布
08-14
在函数组件中，你可以使用useRef等Hook来处理需要引用的DOM元素，但并不会有this指向的问题。 另外，从React 16.8版本开始引入的Hooks功能，它允许我们在不编写类的情况下使用状态和其他React特性。使用Hooks时，...
React中获取元素(ref获取方式)
weixin_48601618的博客
04-11 4705
受控组件 在react中,input标签的部分属性受到react控制,如onChange是基于input 和change 事件进行封装 非受控组件 对于没有经历过封装的一些属性或者方法,可以通过ref去获取这个dom元素,再去获取或触发其自身的属性和方法(这点的话和Vue是一样的) 获取方式 在react的constructor生命周期内,使用React.createRef()进行绑定,即可获取到对应的dom元素 import React from 'react'; class Test extends R
2020/09/25 react中点击子节点获取当前子节点的父元素
Nighsloth的博客
09-25 1803
问题描述：在以下商品结束中点击任意部位，获取到这个块级元素的事件 -比如点button img span 都能够获取到每个商品的黄色大框 直接用event,currentTarget获取 -虽然只打出event看，currentTarget为null，但其实能够拿到这个值 ...
React获取DOM节点
牛栏山矿泉水
09-30 332
1、问题背景 利用React获取DOM节点，需要利用ref属性 2、实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>React获取DOM节点</title> <script type="text/
react 获取指定表单对象中的对象的值
weixin_30555753的博客
05-11 1004
const { getFieldValue } = this.props.form; getFieldValue("prefix") 转载于:https://www.cnblogs.com/handsomejunhong/p/9025572.html
React事件对象
qubuqimingzi的博客
06-01 261
React 事件对象
深入理解React中es6创建组件this的方法
09-01
本文将深入探讨在React中如何理解和处理`this`，以及在ES6类组件中`this`的绑定问题。 首先，`this`在JavaScript中是动态绑定的，它并不受作用域的影响，而是与函数的执行上下文紧密关联。在React中，当我们创建一...
04 React事件 方法、 React定义方法的几种方式 获取数据 改变数据 执行方法传值
03-01
在React中，处理事件、定义方法、获取和改变数据以及执行方法并传递参数是开发过程中不可或缺的部分。让我们深入探讨这些关键概念。 首先，React事件处理与传统的DOM事件处理有所不同。在React中，我们不直接在元素...
React实现点击删除列表中对应项
08-31
在示例中，`add`方法负责此操作，它将一个新的`List`组件添加到`lists`数组中，并为其分配一个唯一的`key`（通常是数组长度）以及一个`index`属性，用于标识其位置。 3. **事件处理**：删除按钮的点击事件需要传递...
React 基础知识
zczdc的博客
05-31 279
React 基础 一、 React概述 1.1 什么是React React是一个用于构建用户界面的JavaScript库. 用户界面: HTML页面(前端) React主要用来写HTML页面,或构建Web应用 如果从MVC的角度来看. React仅仅是视图层(V) , 也就是只负责视图的渲染,而并非提供了 完整的M和C的功能。 React起源于Facebook的内部项目,用来架设Instagram的网站，并于2013年5月开源 1.2 react 的特点 1.声明式 你只需要描述UI ( HTML )看起
初识react（3）——react点击事件如何获取当前dom元素
小R.的博客
03-31 3454
  前不久做react项目时遇到了一个问题：设置一个点击事件后，无法获取当前dom元素。   比如我想在点击下图中的“关闭”图标后，将这部分内容隐藏。   我刚开始是按照之前jQuery的写法去写的，代码如下： closeInfo=()=>{ $(this).parent().hide(); };   然而却没有达到我想要的效果，$(this)并没有获取到当前dom元素。   后...
react: 点击获取当前元素的属性值
柒月小姐姐
08-13 1814
<li className="proviceLi" data-name="北京" onClick={(e)=>this.selectProvice(e)}>北京</li> selectProvice=(e)=>{ console.log(e.currentTarget.getAttribute("data-name")) }
react通过事件对象获取被点击的dom元素
weixin_30670965的博客
07-09 1921
1.通过bind获取事件对象获得被点击的dom元素 <p onClick={this.getVal.bind(this)}>这是p标签</p> getVal(event){ //获取被点击的dom对象 console.log(event.target); } 2.通过箭头函数获取被点击的dom元素（在箭头函数中传入e...
react状态组件事件中的四种获取this方式的写法
lxs19930928的博客
08-19 608
react状态组件中的事件中几种获取this的写法
react之旅（三）react 如何绑定数据、绑定属性、引入图片、循环数据
letianxf的博客
07-18 4331
本文主要讲解在react组件中如何绑定数据，绑定属性，引入图片，以及如何循环数据。 一、react如何绑定数据 在模板中（render函数返回的jsx部分）中，用{}来进行数据绑定： import React from 'react'; class Home extends React.Component{ constructor(props){ super(props); this.state = { name: "react",
react获取原生html元素,怎么获取react的dom
weixin_36293915的博客
06-03 1462
怎么获取react的domReact提供的获取DOM元素的方法有两种，一是react-dom中的findDOMNode()，二是refs。1、findDOMNodefindDOMNode通常用于React组件的引用，其语法如下：import ReactDOM from 'react-dom';ReactDOM.findDOMNode(ReactComponent);当组件被渲染到DOM中后，fin...
React入门（三）之双向绑定
qq_38256266的博客
09-01 6876
双向绑定一、受控元素（组件）1.1、双向绑定1.2、双向绑定的封装二、非受控元素(组件)三、生命周期及其钩子函数3.1、初始化阶段 (挂载)3.2、运行中阶段（更新）（相当于vue中更新阶段）3.3、销毁阶段（卸载） 一、受控元素（组件） 简单概括，受控元素就是一个标签（组件）里用了react 里的东西。 比如，表单的value受控，受数据控制。 实例代码： <script src="../js/react.js"></script> <script src="../js/re
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值