react 事件綁定 es5/es6

// vscode shift + ctrl + v 預覽

es 5 寫法

無參函數的綁定

• first methods
  1. 定義函數:

  handleClick(e) { // e - 事件對象
      e.preventDefault();
      // doSomething ...
  }

  1. constructor 中綁定函數的執行上下文

  this.handleClick = this.handleClick.bind(this);

  1. jsx 中的調用

  <button onClick={this.hanleClick} />

• second methods
  1. 定義函數

  // 同上

  1. jsx 中的調用

  <button onClick={this.hanleClick.bind(this)} />

  有參數的綁定

• only one
  1. 定義函數

  handleClick(param1, param2, e) {
      e.preventDefault();
      // do something ...
  }

  注意此時不管多少個參數， e 必定放在最後

  1. jsx 中調用

  <button onClick={this.hanleClick.bind(this, 'x', 'xx')} />

es 6 寫法

無參數的綁定

• only one
  1. 定義函數：

  handleClick = (e) => {
      e.preventDefault();
      // do something ...
  }

  1. jsx 中調用

  <button onClick={this.hanleClick} />

  比起 es 5 中的無參數函數的綁定調用， es 6 不須要使用 bind 函數；

  有參數函數的綁定

• first methods
  1. 定義函數：

  handleClick = (param1, e) => {
      e.preventDefault();
      // do something ...
  }

  1. jsx 中調用

  <button onClick={this.hanleClick.bind(this, 'x')} />

  有參數時，在綁定時依然要使用 bind；
  而且參數必定要傳，否則仍然存在 this 指向錯誤問題；

• second methods
  1. 定義函數：

  handleClick = (param1, e) => {
      // do something ...
  }

  1. jsx 中調用

  <button onClick={() => this.handleClick('c')} />
  // 若是須要對 event 對象進行處理的話，須要寫成下面的格式
  <button onClick={(e) => this.handleClick('c', e)} />