React-(4)React中的事件绑定

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 作用

1. 初始化this.state
2. 纠正方法的this的指向

 constructor(props){
       super(props);
       this.state={isHot:false};
       //解决handleClick中this指向问题
       this.handleClick = this.handleClick.bind(this);
    }