react事件处理的2种方式

事件处理1：给某元素绑定事件，执行的方法需要添加bind()

import React from 'react';
import ReactDOM from 'react-dom';

class HeaderEs6 extends React.Component {
    //constructor用来初始化组件属性，this.state定义数据，super()为了接收到父类的this指针
    constructor(props) {
        super(props);
        this.state = {
            name: 'kevin',
            age: 29
        }
    }
    handleClick() {
        this.setState({
            age: this.state.age + 1
        });
    }
    render() {
        return (
            <div>
                <h1>I am {this.state.name}</h1>
                <p>I am {this.state.age} years old</p>
                <button onClick={this.handleClick.bind(this)}>加一岁</button>
            </div>
        )
    }
}

ReactDOM.render(
    <div>
        <HeaderEs6 />
    </div>,
    document.getElementById('app')
)；

上面示例代码给button绑定click事件，执行的方法不能用this.handleClick的方式，会报错，

因为此时handleClick中的this已经不是HeaderEs6组件中的this了，所以要用this.handleClick.bind(this)的方式

上面的写法虽然能够解决问题，但每绑定一个事件都需要这样操作，对代码可读性有一定影响，并且不方便复用，

可以通过把handleClick中的this修正到HeaderEs6组件中来解决该问题，

一般推荐这种写法，this.handleClick = this.handleClick.bind(this);  

import React from 'react';
import ReactDOM from 'react-dom';

class HeaderEs6 extends React.Component {
    //constructor用来初始化组件属性，this.state定义数据，super()为了接收到父类的this指针
    constructor(props) {
        super(props);
        this.state = {
            name: 'kevin',
            age: 29
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        this.setState({
            age: this.state.age + 1
        });
    }
    render() {
        return (
            <div>
                <h1>I am {this.state.name}</h1>
                <p>I am {this.state.age} years old</p>
                <button onClick={this.handleClick}>加一岁</button>
            </div>
        )
    }
}

ReactDOM.render(
    <div>
        <HeaderEs6 />
    </div>,
    document.getElementById('app')
);

 

事件处理2：使用箭头函数

如果你觉得上面解决方法还是比较麻烦，推荐用箭头函数来处理

import React from 'react';
import ReactDOM from 'react-dom';

class HeaderEs6 extends React.Component {
    //constructor用来初始化组件属性，this.state定义数据，super()为了接收到父类的this指针
    constructor(props) {
        super(props);
        this.state = {
            name: 'kevin',
            age: 29
        }
    }
    handleClick() {
        this.setState({
            age: this.state.age + 1
        });
    }
    render() {
        return (
            <div>
                <h1>I am {this.state.name}</h1>
                <p>I am {this.state.age} years old</p>
                <button onClick={(e) => this.handleClick(e)}>加一岁</button>
            </div>
        )
    }
}

ReactDOM.render(
    <div>
        <HeaderEs6 />
    </div>,
    document.getElementById('app')
);

 

有需要的朋友可以领取支付宝到店红包，能省一点是一点