Reactjs事件處理的三種寫法

目錄

• 前言
• 1. 在回調函數中使用箭頭函數
• 2. 在構造器中綁定this
• 3. 使用類字段語法
• 事件參數的傳遞。
• 總結

前言

Reactjs中事件處理，與DOM元素處理類似，但也有一些不同的語法。

1. React 事件名稱使用駝峰命名，而不是全小寫命名。
2. 使用JSX，可以將函數作為事件處理程序傳遞，而不是字符串。

es6的class語法規定，類的方法內部，如果含有this，它默認指向類的實例。但是，單獨使用該方法，可能報錯，this指向不明確。
為了解決這個問題，react提出了3中解決方法。

1. 在回調函數中使用箭頭函數

在onClick的時候，使用箭頭函數。這個語法確保this 綁定在handleClick中。
優勢：很容易讓人看懂。
缺點：
在每次render時候，都會產生一個匿名函數。如果此組件作為一個子組件，那么父組件render的時候，子組件也可能會重新渲染，消耗性能。
在線預覽

class ToggleBtn extends React.Component {
  constructor() {
    super()
    this.state = {
      isToggleOn: true
    }
  }
  handleClick(e) {
    this.setState({
      isToggleOn: !this.state.isToggleOn
    })
  }
  render() {
    return (
      <div>
        <button onClick={(e) => this.handleClick(e)}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>
      </div>
    )
  }
}

2. 在構造器中綁定this

優勢：通用。
缺點：繁瑣，每次都得手動綁定this。
在線預覽

class ToggleBtn extends React.Component {
  constructor() {
    super()
    this.state = {
      isToggleOn: true
    }
    // 這個bind方法是必須的，以確保`this`可以在回調函數handleClick中使用
    this.handleClick = this.handleClick.bind(this)
  }  
  handleClick(e) {
    this.setState({
      isToggleOn: !this.state.isToggleOn
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>weiqinl-{this.state.isToggleOn ? 'ON' : 'OFF'}</button>
      </div>
    )
  }
}

3. 使用類字段語法

優點：簡單方便。
缺點：
ES7功能。實驗性屬性，可能不兼容，需要babel處理。
在線預覽

class ToggleBtn extends React.Component {
  constructor() {
    super()
    this.state = {
      isToggleOn: true
    }
  }
  // 這個語法確保`this` 綁定在handleClick中
    handleClick = (e) => {
    this.setState({
      isToggleOn: !this.state.isToggleOn
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>weiqinl-{this.state.isToggleOn ? 'ON' : 'OFF'}</button>
      </div>
    )
  }
}

事件參數的傳遞。

使用箭頭函數和方法原型屬性的bind方法，兩種方式傳遞參數的寫法。

1. 使用e代表React event，
2. 在箭頭函數中，默認是作為第二個參數的。
3. 在bind方法時候，是自動作為它的參數可以使用的。

<button onClick={(e) => this.deleteRow(id, e) }>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

總結

這幾種方式，與類中this的綁定問題，解決方式類似。
盡量使用方法2和方法3。方法1如果將事件傳遞給子組件，可能會有重新渲染的耗能問題。