this指向处理和React中的状态state

import React, { Component } from 'react';

class App extends Component {
    constructor(props){
        super(props);
        this.state={
            count:0
        }
        //改变this的指向
        // this.add = this.add.bind(this)
        
    }
    add(e){
        //console.log(this)//指向App
        console.log(e)
        //修改状态的唯一方法是调用这个this.setState()
        this.setState({
            count:this.state.count+1
        })
    }
    render() {
        console.log("渲染了");
        return (
            <div>
                <h2>{this.state.count}</h2>
                {/* <button onClick={this.add}>+1</button> */}
                {/* <button onClick={this.add.bind(this)}>+1</button> */}
                <button onClick={(e)=>this.add(e)}>+1</button>
            </div>
        );
    }
}

export default App;

原本button里面的add的this应该指向的button，但是它就是指向app不知道怎么搞得，然后要把app的this和add的this绑在一起才行。或者简单一点，利用箭头函数的特殊性，解决这个问题。
以上都不是重点，重点是要想改变组件状态，就必须用setState。