react框架-this指向问题

主要使用红框中的内容

 

import React, { Component } from 'react'

export default class app extends Component {

    value = 1

    add = () => {

        console.log(this.value);

        this.value += 1

    };

    add2 = function() {

        console.log(this.value);

    };

    add3 = (e) => {

        console.log(e);

    }

    render() {

        return (

            <div>

                <input value={this.value} ></input>

                <button onClick={this.add}>按钮</button>

                <button onClick={this.add2.bind(this)} >按钮2</button>

                <button onClick={ () => {

                    console.log(this.value)

                }}>按钮3</button>

                <button onClick={ (e) => this.add3(e)}>按钮4</button>

            </div>

        )

    }

}