React 事件绑定

先来看下面一段错误的代码：

import React, { Component } from 'react';

class Counter extends Component{
    state = {
        count: 1,
    };

    handleClick() {
        console.log('count:', this.state.count)
    };

    render() {
        return(<button onClick={ this.handleClick }>Click</button>); 
    };
}

上面代码之所以会报错，是因为当中 handleClick() 方法中的 this 并未指向实例本身，而是 undefined。

有两种方法修正 this 的指向。

一种是在构造函数 constructor() 用 bind() 方法绑定：

import React, { Component } from 'react';

class Counter extends Component{
    state = {
        count: 1,
    };

    constructor() {
        super();
        this.handleClick = this.handleClick.bind(this);
    };

    handleClick() {
        console.log('count:', this.state.count)
    };

    render() {
        return(<button onClick={ this.handleClick }>Click</button>); 
    };
}

第二种是利用箭头函数：

import React, { Component } from 'react';

class Counter extends Component{
    state = {
        count: 1,
    };

    handleClick = () => {
        console.log('count:', this.state.count)
    };

    render() {
        return(<button onClick={ this.handleClick }>Click</button>); 
    };
}