react事件綁定this的幾種寫法

正常我們不綁定this，this是null

import React, { Component } from 'react'

export default class App extends Component {
  constructor() {
    super()
    this.state = { }
  }
  clickHandler() {
    console.log("this",this);
  }
  render() {
    return (
      <div>
        <h1>我是App頁面</h1>
        <button onClick={ this.clickHandler }>點擊按鈕</button>
      </div>
    )
  }
}

image.png

1: this.clickHandler.bind(this)

import React, { Component } from 'react'
export default class App extends Component {
  constructor() {
    super()
    this.state = {}
  }
  clickHandler() {
    console.log("this",this);
  }
  render() {
    return (
      <div>
        <h1>我是App頁面</h1>
        <button onClick={ this.clickHandler.bind(this) }>點擊按鈕</button>
      </div>
    )
  }
}

2: this.clickHandler = this.clickHandler.bind(this)

import React, { Component } from 'react'
export default class App extends Component {
  constructor() {
    super()
    this.state = {}
    this.clickHandler = this.clickHandler.bind(this)
  }
  clickHandler() {
    console.log("this",this);
  }
  render() {
    return (
      <div>
        <h1>我是App頁面</h1>
        <button onClick={ this.clickHandler }>點擊按鈕</button>
      </div>
    )
  }
}

3: () => this.clickHandler()

import React, { Component } from 'react'
export default class App extends Component {
  constructor() {
    super()
    this.state = {}
  }
  clickHandler() {
    console.log("this",this);
  }
  render() {
    return (
      <div>
        <h1>我是App頁面</h1>
        <button onClick={ () => this.clickHandler() }>點擊按鈕</button>
      </div>
    )
  }
}

4: clickHandler = () => { console.log("this",this); } （工作中推薦這種寫法）

import React, { Component } from 'react'
export default class App extends Component {
  constructor() {
    super()
    this.state = {}
  }
  clickHandler = () => { console.log("this",this); } // 推薦寫法
  render() {
    return (
      <div>
        <h1>我是App頁面</h1>
        <button onClick={ this.clickHandler }>點擊按鈕</button>
      </div>
    )
  }
}

4中綁定this展示效果

image.png