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若是將事件傳遞給子組件，可能會有從新渲染的耗能問題。