react-事件中的this为什么是undefined

发表于 | 分类于

前言

目前在开发react中，一般采用es6中类来定义组件。所以不可避免的在定义类里面的方法的时候会采用bind来显示绑定类里面方法的上下文。

举例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from "react";

export default class Test2 extends React.Component{
	//构造函数
	constructor(){
		super();
		this.state ={
			a:1,
			b:2
		}
	}
	btnHandle(){	
		console.log(this);
	}
	render(){
		  return <div>
		  	<h1>test2222</h1>
		  	<h1>{this.state.a}</h1>
		  	<button onClick={this.btnHandle}>按我加</button>
		  </div>
	}
}

当我们点击button的时候，会触发onClick事件，此时在控制台会输出undefined。

按照原生方法的进行测试的时候，浏览器应该会输出绑定当前事件的DOM元素，或者是window对象。原生代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
<input id="btn" type="button" value="按钮1">
<input id="ss" type="button" value="按钮2" onclick="s()">
  <script>
      var moudle=new Object({
          a:5,
          showA:function(e){
              console.log(this);
          }
      });
      document.getElementById("btn").onclick=moudle.showA;

     var s = moudle.showA;
  </script>

结果如下：

结论

看了一下源码，没看懂。大致上可能因为react中各个组件要分离，组件中的事件也是props，为了方便处理props，所以才会默认返回undefined或者null吧。 待定。。。以后看了react源码再解释吧。