React 元素的事件處理和 DOM元素的很相似。但是有一點語法上的不同:

• React事件繫結屬性的命名採用駝峰式寫法，而不是小寫。
• 如果採用 JSX 的語法你需要傳入一個函式作為事件處理函式，而不是一個字串(DOM元素的寫法)

你必須謹慎對待 JSX 回撥函式中的 this，類的方法預設是不會繫結this 的。如果你忘記繫結 this.handleClick 並把它傳入 onClick, 當你呼叫這個函式的時候 this 的值會是 undefined。

這並不是 React 的特殊行為；它是函式如何在JavaScript中執行的一部分。通常情況下，如果你沒有在方法後面新增 ()

• bind方法

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

• 屬性初始化器

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}
 

• 在回撥函式中使用箭頭函式

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}