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

最新推荐文章于 2024-02-28 10:25:01 发布
最新推荐文章于 2024-02-28 10:25:01 发布
阅读量3.9k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/OLiver_web/article/details/78757797
版权



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

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


一个橘子a
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React 组件中的 bind(this)示例代码
10-18
主要介绍了 React 组件中的 bind(this) ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
关于React中使用bind(this)的理解
想搞全栈的前端
09-04 8990
前言 在学习React的过程中发现调用函数的时候必须使用bind(this)，之后直接在class中声明函数即可正常使用，但是为什么要使用这个呢？在这里总结一下。 1.JavaScript自身特性说明 如果传递一个函数名给一个变量，之后通过函数名()的方式进行调用，在方法内部如果使用this则this的指向会丢失。 示例代码： 首先我们创建test对象并直接调用方法 ： const test = ...
初识react（3）——react点击事件如何获取当前dom元素
小R.的博客
03-31 3283
  前不久做react项目时遇到了一个问题：设置一个点击事件后，无法获取当前dom元素。   比如我想在点击下图中的“关闭”图标后，将这部分内容隐藏。   我刚开始是按照之前jQuery的写法去写的，代码如下： closeInfo=()=>{ $(this).parent().hide(); };   然而却没有达到我想要的效果，$(this)并没有获取到当前dom元素。   后...
react函数中使用bind的作用
最新发布
weixin_51057497的博客
02-28 429
react函数中使用bind的作用
react合成事件——bind解决this指向——箭头函数解决this指向
阿牛哥的博客
09-20 562
合成事件——bind解决this指向——箭头函数解决this指向
react之事件处理
BradenHan的专栏
04-03 2351
这里的事件，指的是，如 , 等，而非我们自己通过 props 传递的属性，并在子组件中手动触发的事件实例 react事件声明 react事件采用命名 react事件接收一个， 绑定事件 采用来绑定一个事件.注意，这里和原生的事件是有区别的: 原生的事件全是小写onclick , React里的事件是 ，React的事件并不是原生事件，而是。和普通浏览器一样，事件handler会被自动传入一个 对象，这个对象和普通的浏览器 对象所包含的方法和属性都基本一致。不同的是React中的 对象并不是浏览器提供
React钩子以获取元素的位置
06-08
@rehooks/usePosition React hook for ... 注意：这是使用新的 React Hooks API 提案，该提案在 React 16.7 最终版之前可能会发生变化。您需要在 ^16.7.0-alpha.0 安装 react、react-dom 等安装 yarn add @rehooks/...
React中this丢失的四种解决方法
10-17
主要给大家介绍了关于React中this丢失的四种解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者使用React具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
详解React 16 中的异常处理
08-29
主要介绍了详解React 16 中的异常处理的相关资料,React 16.x 版本中，引入了所谓 Error Boundary 的概念，从而保证了发生在 UI 层的错误不会连锁导致整个应用程序崩溃；未被任何异常边界捕获的异常可能会导致整个 ...
React中为什么要使用bind
grand_brol的博客
03-27 688
案例 <!DOCTYPE > <html> <head></head> <body> <div id="box"></div> <script type="text/javascript" src="../库/react.development.js"></script> <script type="text/javascript" src="../库/react-dom.dev
React中的bind
LPLIFE的博客
11-13 2003
作用：需要在事件处理程序中访问父组件，同样需要把该函数绑定到组件。 如何将函数绑定到组件实例,可以使用以下几种方法： 1.Constructor中绑定(ES2015) constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } 2.在Render中使用bind...
JavaScript中bind函数的使用
编程界明世隐的博客
12-02 6928
bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()第一个参数的值，当然这是绑定哦，不是像call、apply一样直接执行，apply要执行的话还得自己调用。 举个简单的例子 var me={ name:'我' } var friendA={ name:'朋友A', sendMsg:function(target,content){ console.log("【"+this.name+"】给【"+target+"】发送
react -- refs 获取DOM元素
hahahahahahahaha__1的博客
05-25 2427
1.要引入的文件：        &lt;script src='react.js'&gt;&lt;/script&gt; &lt;script src='react-dom.js'&gt;&lt;/script&gt; &lt;script src='babel.min.js'&gt;&lt;/script&gt;2.代码：&lt;div id='example'&gt;&lt;/div
React事件处理函数必须使用bind(this)的原因
Jack汪喆的技术分享栏
08-15 1万+
学习React的过程中发现调用函数的时候必须使用bind(this)，之后直接在class中声明函数即可正常使用，但是为什么呢，博主进行了一番查阅，总结如下。 1.JavaScript自身特性说明 如果传递一个函数名给一个变量，之后通过函数名()的方式进行调用，在方法内部如果使用this则this的指向会丢失。 示例代码： 首先我们创建test对象并直接调用方法 ： c...
react系列-bind this
沈斯明技术博客
12-01 4862
react系列-bind this 问题 对于大多数前端开发来说，JavaScript 的 this 关键字会造成诸多困扰，由于 JavaScript 代码中的 this 指向并不清晰。在写react应用时，也会也到很多作用域绑定引起的问题，React组件ES6的写法，不会将方法内部的作用域自动绑定到组件的实例上。 下面展示一段问题代码 class Se
React事件处理函数中绑定this的bind()函数
热门推荐
Michael_Li的博客
11-28 2万+
今天在看最新的React官方教程时发现了一个问题，开始全面使用ES6语法的React在Handling Events这节中，提到了绑定的事件处理函数要现在构造函数中使用bind()将this进行正确的绑定，涉及到的代码如下：
ES6(React)中的bind(this)详解
初心 - 杨瑞超个人博客
09-13 2005
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群)：757345416 探讨问题： 在使用React中 如果使用ES6的Class extends写法 如果onClick绑定一个方法，需要bind(this)，而使用React.createClass方法 就不需要。 解析： React.createClass 是ES5 的写法默认绑定了 bind 写法。 在 ES6...
react中从表格外部onClick获取当前table的所有数据
05-27
2. 在点击事件处理函数中，通过`tableRef.current`获取表格DOM节点，再通过`querySelectorAll`方法获取所有的`<tr>`元素： ```jsx function handleClick() { const rows = tableRef.current.querySelectorAll("tr...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值