react 改变this指向问题

1、利用箭头函数自身不绑定this的特点

<button onClick={()=>this.add()}>+1</button>

2、Function.prototype.bind()

class One extends React.Component {
    constructor() {
        super()
        this.add = this.add.bind(this)
        this.state = {
            count: 0
        }
    }
    add() {
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        return <div>
            <h1>数据是：{this.state.count}</h1>
            <button onClick={this.add}>+1</button>
        </div>
    }
}

3、class的实例方法
利用箭头函数形式的class实例方法
注意：该语法是实验性语法，但是由于babel的存在可以直接使用

class One extends React.Component {
    state = {
        count: 0
    }
    add = () => {
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        return <div>
            <h1>数据是：{this.state.count}</h1>
            <button onClick={this.add}>+1</button>
        </div>
    }
}