React中的事件绑定
在 React 组件中,每个方法的上下文都会指向该组件的实例,即自动绑定 this 为当前组件。而且 React 还会对这种引用进行缓存,以达到 CPU 和内存的最优化。在使用 ES6 classes 或者纯函数时,这种自动绑定就不复存在了,需要手动实现this 的绑定
1.代码演示
import React,{Component} from 'react';
import './Hello.css';
export default class Hello extends Component{
constructor(props){
super(props);
this.state={isHot:false};
//解决handleClick中this指向问题
this.handleClick = this.handleClick.bind(this);
}
//类中的方法默认开启了严格模式,所以handleClick中的this是underfind
handleClick(){
console.log(this)
console.log("点击事件触发了")
}
render(){
console.log(this)
return <div className='Hello'>
<h2 className='Hello_header' onClick={this.handleClick}> 今天的心情很{this.state.isHot?'愉快':'糟糕'}</h2>
</div>
}
}
代码细节:
- 事件名都是用小驼峰格式进行书写,例如onclick要改写成onClick;
- 从上面可以看到,事件绑定的方法需要使用{}包住;
- constructor中要解决this指向问题,在组件的构造器内完成了 this 的绑定,这种绑定方法的好处在于仅需要进行一次绑定,而不需要每次调用事件监听器时去执行绑定操作。
2.效果演示
打开浏览器控制台,查看点击效果
从图中可以看到我们的点击事件触发了
3.拓展
React 中constructor 作用
- 初始化this.state
- 纠正方法的this的指向
constructor(props){
super(props);
this.state={isHot:false};
//解决handleClick中this指向问题
this.handleClick = this.handleClick.bind(this);
}