react事件绑定时用bind函数绑定this详解

最新推荐文章于 2024-10-19 19:02:08 发布
最新推荐文章于 2024-10-19 19:02:08 发布
阅读量175 收藏
点赞数
文章标签： react.js 前端 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42802725/article/details/122085758
版权

为什么函数要绑定this:
函数想访问state里的变量
state在实例对象里
this在函数里
故人工将实例对象传给this
（由于函数并非由实例对象触发，无法访问实例对象）
函数通过this去访问实例对象里的state
在这里插入图片描述

实例如下
在这里插入图片描述
为什么要用bind函数而非apply或者call：
call apply都是执行函数，将返回值传给左边且改变this指向
而bind则是复制函数，将函数体传给左边且改变this指向

实例第二版
在这里插入图片描述
实例第三版（我们最终常用的版本）
在这里插入图片描述

React 进阶之路：深入详解事件绑定的多样方式与区别，促使更加容易理解
向着太阳迎着光
01-11 1173
React 中的事件绑定是处理用户交互的一个重要方面。React 的事件系统与传统的 DOM 事件系统有所不同，它在设计时考虑了性能、可维护性和易用性，因此 React 提供了多种方式来绑定事件处理程序。理解这些绑定方式及其区别，有助于在实际项目中做出更合理的选择。React 提供了几种常见的事件绑定方式，具体包括：在类组件中，最常见的做法是在构造函数中使用 来绑定事件处理函数的 。因为在 JavaScript 中，类方法默认没有绑定 ，所以需要手动绑定。示例代码： 优点：缺点：另一种常用的绑定方式是直接
React 18之新hook
yjwlike的博客
04-15 2226
react18新出了5个hook, 分别是 : useId useTransition useDeferredValue useSyncExternalStore useInsertionEffect useId useId用于生成一个包含 :号的唯一id, 可在组件中多次使用, id是不重复的, 当项目中存在多个根应用时, 我们还可以给useId生成的id增加前缀 ...
React事件处理函数必须使用bind(this)的原因
不曾畏惧
10-23 266
转载地址https://blog.csdn.net/qq_34829447/article/details/81705977 1.JavaScript自身特性说明 如果传递一个函数名给一个变量，之后通过函数名()的方式进行调用，在方法内部如果使用this则this的指向会丢失。 示例代码： 首先我们创建test对象并直接调用方法 ： const test = { name:'...
react之bind函数到组件通识篇
weixin_34138139的博客
04-06 414
前言 在说起react的函数绑定之前，我们有必要了解下bind函数的作用是什么，函数的执行的上下文以及其默认的this是指向的哪里？有点抽象？那么你可以去看下下面的两个方法的执行会有什么区别吧。 let customer={ name:'Robin', getName:function(){ console.log(this.name); } } customer.getName()...
React事件绑定时this指向问题解决以及事件传参
M_Edison的博客
05-11 469
React事件绑定中的this指向问题 当时如果这是我有一个需求，我点击以下按钮，来获取我们state中的数据。 btnfun(){ console.log(this);//undefined console.log(this.state.data);//not undefined } 这里为什么会出现这个问题呢？因为btnfun()函数并不是我们主动调用的，而是当触发button的事件时，react内部再去调用这个函数。而react的内部时不知道这里的this是指向哪里的。 为了解决这个
关于React中使用bind(this)的理解
想搞全栈的前端
09-04 9481
前言 在学习React的过程中发现调用函数的时候必须使用bind(this)，之后直接在class中声明函数即可正常使用，但是为什么要使用这个呢？在这里总结一下。 1.JavaScript自身特性说明 如果传递一个函数名给一个变量，之后通过函数名()的方式进行调用，在方法内部如果使用this则this的指向会丢失。 示例代码： 首先我们创建test对象并直接调用方法 ： const test = ...
react中的属性初始化器、箭头函数、bind绑定函数的区别
dugushangliang的博客
05-26 2964
版权声明：转载请注明作者（独孤尚良dugushangliang）出处： https://blog.csdn.net/dugushangliang/article/details/90580582 参阅https://www.runoob.com/react/react-event-handle.html 这里的属性初始化器，指的是，handleClick在类中是一个属性，这个属性指的是一...
详解react关于事件绑定this的四种方式
08-27
React 事件绑定是 React 中一个非常重要的概念，特别是在使用 ES6 class 或纯函数时，需要手动实现this的绑定。下面我们来详细介绍 React 事件绑定this 的四种方式。 Bind 方法 Bind 方法是 React 事件绑定this ...
详解三种方式在React中解决绑定this的作用域问题并传参
10-14
为了解决这个问题，可以在事件处理函数上使用`.bind()`方法显式地绑定`this`。 ```jsx render() { return ( type="button" value="Way1" onClick={this.changeMsg1.bind(this)} // 使用.bind(this) /> ...
在React中如何优雅的处理事件响应详解
12-11
总结来说，React提供了多种处理事件响应的方法，包括使用箭头函数、在构造函数中绑定`this`以及利用属性初始化语法。选择哪种方式取决于具体的需求和对性能优化的关注程度。在实际开发中，开发者可以根据项目规模和...
【React进阶系列】史上最全React事件机制详解
最新发布
kelai_6792的博客
10-19 1586
（1）命名规范不同React事件的属性名是采用驼峰形式的，事件处理函数是一个函数；原生事件通过addEventListener给事件添加事件处理函数（2）React事件只支持事件冒泡。原生事件通过配置第三个参数，true为事件捕获，false为事件冒泡（3）事件挂载目标不同React事件统一挂载到document上；原生事件挂载到具体的DOM上（4）this指向不同原生事件：1.如果onevent事件属性定义的时候将this作为参数，在函数中获取到该参数是DOM对象。
React中的事件处理为什么要bind this?
dglf54292的博客
11-11 608
个人总结: 问: 请给我讲一下React中的事件处理为什么要bind this? 答: 好的，比如说我写了一个类组件，有个onClick属性 ，onClick={ this.fun },如果不bind肯定是不行的，下面讲一下为什么要bind this: 首先我们知道React是通过创建虚拟DOM 然后将虚拟DOM生成真实的DOM 最后插入到页面中， ...
React解密：React类组件中为什么要绑定this？
lee前端技术站
08-24 2373
我们在开发react组件的时候，总是会在构造函数中或者是事件中去通过bind方法去绑定this。不知道你有没有思考过这是为什么呢？难道不绑定this就不可以吗？为什么react类组件中要绑定this,绑定的方式又有哪些呢？ 直白点来说。其实react中绑定this和react本身没有半毛钱关系。哈哈哈，意不意外？惊不惊喜？所以，既然是这样，我们就来说说this绑定的哪些事儿。 默认绑定 function test（） { console.log(this) } test() //
TS装饰器bindThis优雅实现React类组件中this绑定
不定时分享最优质的网络技术与教程，满满的干货。
12-03 1099
初学React类组件时，最不爽的一点应该就是 指向问题了吧！初识React的时候，肯定写过这样错误的demo。 ? 丢失了。编译React类组件时，会将 转成 ，并 事件用对象包裹一层传参给该函数。 写到这里肯定会让大家觉得是 在埋坑，其实不然，官方文档有澄清：这并不是 自身的行为: 这是因为 函数在 JS 中就是这么工作的。通常情况下，比如，你应该 bind 这个方法。经受过面向对象编程的洗礼，为什么还要在类中手动绑定 ? 我们参考如下代码、 上述代码如期打印了 。就是在 中执行
为什么React事件处理函数必须使用Function.bind()绑定this？
huyao的博客
09-29 2200
转载自：http://www.cnblogs.com/DM428/p/7777539.html 最近在React官网学习Handling Events这一章时，有一处不是很明白。代码如下： class Toggle extends React.Component { constructor(props) { super(props); this.state = {isTo...
React中的bind
LPLIFE的博客
11-13 2082
作用：需要在事件处理程序中访问父组件，同样需要把该函数绑定到组件。 如何将函数绑定到组件实例,可以使用以下几种方法： 1.Constructor中绑定(ES2015) constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } 2.在Render中使用bind...
react 的 bind this 几种方法
qq_25153595的博客
06-28 1893
1.  在constructor里面可以绑定，例如：     constructor(){         this.xxx = this.xxx.bind(this);     } 2. 在调用的时候可以绑定，例如：      onClick= {this.xxx.bind(this)} 3. 在调用的时候，换一种写法， 例如：      onClick = { () => t
关于react绑定事件中的this
qq_38355456的博客
12-09 3064
关于react事件中的this指针问题： 如果我们在react时间中，如果不绑定this，那么方法执行的时候是找不到this的： 比如下面的情况： import React from 'react' import Logo from '../../component/logo/logo' import {List,InputItem,WingBlank,WhiteSpace,Button}
React组件的this解析与函数调用者影响
"React组件中的`this`使用详解" 在React开发中，`this`关键字在组件中的行为是至关重要的，因为它决定了函数上下文。在深入理解`this`之前，我们先来回顾一下JavaScript中`this`的基本概念。`this`在JavaScript中并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值