前言

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

react事件名稱使用駝峰命名，而不是全小寫命名。
使用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>
    )
  }
}

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

事件引數的傳遞。

使用箭頭函式和方法原型屬性的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如果將事件傳遞給子元件，可能會有重新渲染的耗能問題。