React-在不同的函数中使用this

在constructor中的箭头函数fn1中使用this 

import React, { Component } from 'react'

export default class App extends Component {
    constructor(){
        super()
        this.fn1=()=>{
            console.log(this)
        }
    }
    // fn2(){
    //     console.log(this)
    // }
    
   
    render() {
        return(
            <div>
              <button onClick={this.fn1}>点击使用fn1</button>
              {/* <button onClick={this.fn2}>点击使用fn2</button> */}
            </div>
        )
       
    }
}

 可以直接打印出this，并且正确

在class中直接定义方法fn2中

import React, { Component } from 'react'

export default class App extends Component {
    constructor(){
        super()
        this.fn1=()=>{
            console.log(this,"这是fn1")
        }
    }
    fn2(){
        console.log(this,"这是fn2")
    }
    
   
    render() {
        return(
            <div>
              <button onClick={this.fn1}>点击使用fn1</button>
              <button onClick={this.fn2}>点击使用fn2</button>
            </div>
        )
       
    }
}

 无法直接打印this

解决办法:绑定bind或者call，因为该方法是声明式函数所以不能直接绑定bind因此得在下面标签绑定事件中使用bind(this)，将this传入进去，就可以正常使用了。

import React, { Component } from 'react'

export default class App extends Component {
    constructor(){
        super()
        this.fn1=()=>{
            console.log(this,"这是fn1")
        }
    }
    fn2(){
        console.log(this,"这是fn2")
    }
    
   
    render() {
        return(
            <div>
              <button onClick={this.fn1}>点击使用fn1</button>
              <button onClick={this.fn2.bind(this)}>点击使用fn2</button>
            </div>
        )
       
    }
}

 在class中直接定义箭头函数

import React, { Component } from 'react'

export default class App extends Component {
    constructor(){
        super()
        this.fn1=()=>{
            console.log(this,"这是fn1")
        }
    }
    fn2(){
        console.log(this,"这是fn2")
    }
    fn3=()=>{
        console.log(this,"这是fn3")
    }
   
    render() {
        return(
            <div>
              <button onClick={this.fn1}>点击使用fn1</button>
              <button onClick={this.fn2.bind(this)}>点击使用fn2</button>
              <button onClick={this.fn3}>点击使用fn3</button>
            </div>
        )
       
    }
}

可以直接访问this

在constructor中使用定义式函数fn4、

import React, { Component } from 'react'

export default class App extends Component {
    constructor(){
        super()
        this.fn1=()=>{
            console.log(this,"这是fn1")
        }
        this.fn4= function(){
            console.log(this,"这是fn4")
        }
       
    }
    fn2(){
        console.log(this,"这是fn2")
    }
    fn3=()=>{
        console.log(this,"这是fn3")
    }
    
    render() {
        return(
            <div>
              <button onClick={this.fn1}>点击使用fn1</button>
              <button onClick={this.fn2.bind(this)}>点击使用fn2</button>
              <button onClick={this.fn3}>点击使用fn3</button>
              <button onClick={this.fn4}>点击使用fn4</button>
            </div>
        )
       
    }
}

 不能正常取到this

解决办法：因为他是定义式函数，所以可以不用在onclick哪里添加bind，可以直接在他定义的后面，添加一个.bind()然后就可以正常使用this了