React 與 bind this 的一些心得

class Animal {
  constructor(name) {
    this.name = name;
  }
  run() {
    console.log(`${this.name} has run 100 cm`);
  }
}

const dog = new Animal('poke');
dog.run();
poke has run 100 cm
  1. render

提供5個解法

這5個解法可以挑一種使用就可以,每一種都有不同的優缺點,大家可以依照自己使用的情境來挑選。喜歡看原文的可以點下面的連結


<Input onChange={this.handleChange.bind(this)} />

constructor(props) {
  super(props);
  this.handleChange = this.handleChange.bind(this);
}

<Input onChange={(e) => this.handleChange(e)} />

handleChange = (e) => {
  this.XXXX
}

總結

在了解了 React 這麼多種綁定 this 的方法之後,應該也會跟我一樣選擇使用箭頭函數來宣告 property 吧!!不過在使用箭頭函數之前必須要開啟 babel 的 transform-class-properties or enable stage-2 in Babel 這兩個功能,所以如果不太會設定 webpack 或是 babel 的同學可以建議直接用我們做好的 startKit 直接使用,裡面就已經有箭頭函數的功能了!

ReactMaker

react maker

陳旭清(Hyman)

Written by

FrontEnd Warrior 👨🏼‍🚀

ReactMaker

react maker