react中三种函数调用方法总结

方式一：内联调用法

import React, { Component } from 'react';

class func extends Component{
    constructor(porps){
        super(props);
    }
    funcOne(){
        console.log('内联调用法')
    }
    render(){
        return (
            <button onClick={this.funcOne.bind(this)}></button>
        )
    }
}

方式二：配置中调用法

import React, { Component } from 'react';

class func extends Component{
    constructor(porps){
        super(props);
        this.funcTwo = this.funcTwo.bind(this)
    }
    funcTwo(){
        console.log('配置中调用法')
    }
    render(){
        return (
            <button onClick={this.funcTwo}></button>
        )
    }
}

方式三：箭头函数调用法（最推荐）

import React, { Component } from 'react';

class func extends Component{
    constructor(porps){
        super(props);
    }
    funcThree:() => {
        console.log('箭头函数调用法')
    }
    render(){
        return (
            <button onClick={this.funcThree}></button>
        )
    }
}

本文借鉴于：https://www.jianshu.com/p/601109471bbb