(转)React事件处理函数必须使用bind(this)的原因

摘要:
这个问题的解决方案是在调用函数时进行绑定,这样无论如何传递事件处理函数,这一点都是当前的实例化对象。当然,如果我们不想使用bind,我们可以在声明函数时使用arrow函数将函数内容返回给变量,并直接使用这个。调用时的变量名。

1.JavaScript自身特性说明
如果传递一个函数名给一个变量,之后通过函数名()的方式进行调用,在方法内部如果使用this则this的指向会丢失。
示例代码:
首先我们创建test对象并直接调用方法 :

const test = {
name:'jack',
getName:function(){
console.log(this.name)
}
}
test.getName()
1
2
3
4
5
6
7
使用node test.js执行上述代码可以正常输出jack。
之后,我们对代码进行调整:

const test = {
name:'jack',
getJack:function(){
console.log(this.name)
}
}
const func = test.getJack;
func();
1
2
3
4
5
6
7
8
我们没有直接调用对象的方法,而是将方法声明给一个中间变量,之后利用中间变量()调用方法,此时this则失去指向,输出undefined,如果使用node环境执行js文件则输出node相关信息,如嵌入到html中则this指向window对象。

2.React事件绑定
React中的bind同上方原理一致,在JSX中传递的事件不是一个字符串,而是一个函数(如:onClick={this.handleClick}),此时onClick即是中间变量,所以处理函数中的this指向会丢失。解决这个问题就是给调用函数时bind(this),从而使得无论事件处理函数如何传递,this指向都是当前实例化对象。
当然,如果不想使用bind(this),我们可以在声明函数时使用箭头函数将函数内容返回给一个变量,并在调用时直接使用this.变量名即可。示例代码如下:

import React from 'react';
export default class Life extends React.Component{
constructor(props){
super(props);
this.state = {
count:4
};
}
render(){
var style = {
padding:'10px',
color:'red',
fontSize:'30px'
}
return (
<div style={style}>{/*注意js语法使用一个括号{}去表示,style使用两个括号,原因里面其实是一个对象*/}
<p>React生命周期介绍</p>
<button onClick={this.handleAdd}>无bind点击一下</button>
<button onClick={this.handleClick.bind(this)}>有bind点击一下</button>
<p>{this.state.count}</p>
</div>
)
}
//此时this指向是当前实例对象
handleAdd = ()=> {
console.log(this)
this.setState({
count:5
})
}
handleClick(){
this.setState({
count:6
})
}
}
---------------------
版权声明:本文为CSDN博主「汪喆_Jack」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_34829447/article/details/81705977

免责声明:文章转载自《(转)React事件处理函数必须使用bind(this)的原因》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇SQLServer数据库(二)7--SpringCloud:Config/Bus周阳老师下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

第六章 前端开发——Vue框架

第六章 前端开发学习——Vue框架 一、Vue介绍 二、Vue实例 三、Vue视图 四、Vue组件 五、Vue过度动画 一、Vue介绍 1.前端框架介绍 A)前端框架有 React      Facebook Angular   Google Vue         全世界 B)Angular、Vue、React的区别 Vue与React React...

Java高并发网络编程(四)Netty

在网络应用开发的过程中,直接使用JDK提供的NIO的API,比较繁琐,而且想要进行性能提升,还需要结合多线程技术。 由于网络编程本身的复杂性,以及JDK API开发的使用难度较高,所以在开源社区中,涌现出来了很多对JDK NIO进行封装、增强的网络编程框架,比如Netty、Mina等。 一、Netty简介 https://netty.io/官网 Netty...

webpack学习笔记--按需加载

为什么需要按需加载 随着互联网的发展,一个网页需要承载的功能越来越多。 对于采用单页应用作为前端架构的网站来说,会面临着一个网页需要加载的代码量很大的问题,因为许多功能都集中的做到了一个 HTML 里。 这会导致网页加载缓慢、交互卡顿,用户体验将非常糟糕。 导致这个问题的根本原因在于一次性的加载所有功能对应的代码,但其实用户每一阶段只可能使用其中一部分功...

mount的bind选项

mount 的 bind 选项将第一个目录克隆到第二个。一个目录中的改变将会在另一个中出现 — 毕竟,它是同一磁盘上的同一个块。 使用 bind 与对同一设备进行两次挂载的区别在于:您可以挂载子目录而无需挂载整个文件系统。 绑定挂载(bind mount)允许从任何其他位置访问任何文件或目录。 范例七:将 /home 这个目录暂时挂载到 /mnt/hom...

socket 客户端和服务端思考

accept :连接一个客户端:连接对象, 地址 这个连接断开之前,别的连接是不受理的。如果客户端断开,会报错,因为连接突然没了。 所以,客户端会使用随机端口,但是端口会用完。因为端口不会立即释放。跟系统设置有关,一般的业务应该没有问题,自动释放,是可以接受的。 不对的 !!!:一个端口只用一次。 不对的 !!!:所以,用 bind 固定客户端端口。服务端...

react 使用 eslint 的三种代码检查方案总结,多了解点--让代码更完美....

  1、介绍     ESLint 是一个可扩展,每条规则独立,被设计为完全可配置的lint工具。     可以用来检测代码,避免低级错误     可以用来规范代码的开发风格,统一代码习惯。 2、为什么使用 ESLint ?     统一代码规范 :     在开发中,可能会遇到很多不同的同事同时开发一个项目 ,或者在工作的调整中,会有接手一个项目,  ...