React学习笔记之事件绑定

React学习之事件绑定

React事件绑定也是React中比较有趣的地方，涉及到了很多JavaScript中比较底层的知识。

一、事件绑定

在React中，想要绑定事件，可以这么实现

class Test extends Component {
   
	state = {
   
	
	};
	test1(e) {
   
	   //this 为 undefined
	   console.log('test1', this, e)
	}
	
	render() {
   
	   return (<div>
	       <button onClick={
   this.test1}>按钮1</button>
	   </div>);
	}
}

绑定的事件会默认传入一个事件对象，里面有坐标、类型等属性，具体的内容可以输出来看一下。

需要注意的是，这里test1( ) 的this是undefined，这是因为用JSX来绑定事件，就相当于你传递一个函数名给一个变量，然后通过在变量后加括号()来调用这个方法，此时方法内部的this的指向就会丢失。所以如果直接这样绑定事件，就会丢失this，也无法完成一些对组件的操作了。