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

1.JavaScript自身特性说明

如果传递一个函数名给一个变量，之后通过函数名()的方式进行调用，在方法内部如果使用this则this的指向会丢失。

首先我们创建test对象并直接调用方法 ：

1 const test = {
2     name:'jack',
3     getName:function(){
4         console.log(this.name)
5     }
6 }
7 test.getName()

输出jack。

之后，我们对代码进行调整：

1 const test = {
2     name:'jack',
3     getJack:function(){
4         console.log(this.name)
5     }
6 }
7 const func = test.getJack;
8 func();

我们没有直接调用对象的方法，而是将方法声明给一个中间变量，之后利用中间变量()调用方法，此时this则失去指向，输出undefined，如果使用node环境执行js文件则输出node相关信息，如嵌入到html中则this指向window对象。

2.React事件绑定

React中的bind同上方原理一致,在JSX中传递的事件不是一个字符串，而是一个函数（如:onClick={this.handleClick}），此时onClick即是中间变量，所以处理函数中的this指向会丢失。解决这个问题就是给调用函数时bind(this)，从而使得无论事件处理函数如何传递，this指向都是当前实例化对象。

当然，如果不想使用bind(this)，我们可以在声明函数时使用箭头函数将函数内容返回给一个变量，并在调用时直接使用this.变量名即可。示例代码如下：

 1 import React from 'react';
 2 export default class Life extends React.Component{
 3     constructor(props){
 4         super(props);
 5         this.state = {
 6             count:4
 7         };
 8     }
 9     render(){
10         var style = {
11             padding:'10px',
12             color:'red',
13             fontSize:'30px'
14         }
15         return (
16             <div style={style}>{/*注意js语法使用一个括号{}去表示,style使用两个括号,原因里面其实是一个对象*/}
17                 <p>React生命周期介绍</p>
18                 <button onClick={this.handleAdd}>无bind点击一下</button>
19                 <button onClick={this.handleClick.bind(this)}>有bind点击一下</button>
20                 <p>{this.state.count}</p>
21             </div>
22         )
23     }
24     //此时this指向是当前实例对象
25     handleAdd = ()=> {
26         console.log(this)
27         this.setState({
28             count:5
29         })
30     }
31     handleClick(){
32         this.setState({
33             count:6
34         })
35     }
36 }

————————————————

版权声明：本文为CSDN博主「汪喆_Jack」的原创文章，

原文链接：https://blog.csdn.net/qq_34829447/article/details/81705977