React中的事件處理

在React元素中綁定事件有兩點(diǎn)需要注意：

（1）在React中，事件命名采用駝峰命名方式，而不是DOM元素中的小寫字母命名方式。例如onclick要寫成onClick，onchange要寫成onChange等。
（2）處理事件的響應(yīng)函數(shù)要以對象的形式賦值給事件屬性，而不是DOM中的字符串形式。例如在DOM中綁定一個點(diǎn)擊事件應(yīng)該寫成：

<button onclick="clickButton()">  Click</button>

而在React元素中綁定一個點(diǎn)擊事件變成這種形式：

<button onClick={clickButton}> // clickButton是一個函數(shù)  Click</button>

React中的事件是合成事件，并不是原生的DOM事件。

React根據(jù)W3C規(guī)范定義了一套兼容各個瀏覽器的事件對象。在DOM中可以通過返回false來阻止事件的默認(rèn)行為，但在React中，必須顯式的調(diào)用事件對象的preventDefault方法來阻止事件的默認(rèn)行為。

在某些場景下如果必須使用DOM提供的原生事件，可以通過React事件對象的nativeEvent屬性獲取。

其實(shí)，在平時的開發(fā)中，React組件中處理事件最容易出錯的地方是事件處理函數(shù)中的this的指向問題，因為ES6 class并不會為方法自動綁定this到當(dāng)前對象。

下面我們具體來看一下常見的三種處理this的方式：

React事件處理的this處理

使用箭頭函數(shù)

直接在React元素中采用箭頭函數(shù)定義事件的處理函數(shù)，如：

class MyComponent extends React.Component {  constructor(props) {    super(props);    this.state = {      number: 0    }  }  render() {    return (      <button onClick={(event) => {          console.log(this.state.number);        }}>        Click      </button>      )  }}

箭頭函數(shù)中的this指向的是函數(shù)定義時的對象，所以可以保證this總是指向當(dāng)前組件的實(shí)例對象。

當(dāng)事件處理邏輯比較復(fù)雜時，如果把所有的邏輯直接寫在onClick的大括號中，就會導(dǎo)致render函數(shù)變的臃腫，不容易直觀地看出組件的UI結(jié)構(gòu)，代碼可讀性也不好。這樣，我們可以把邏輯處理封裝成組件的一個方法，然后在箭頭函數(shù)中調(diào)用該方法即可。

class MyComponent extends React.Component {  constructor(props) {    super(props);    this.state = {      number: 0    }  }  handleClick(event) {    const number = ++this.state.number;    this.setState({      number: number    });  }  render() {    return (      <button onClick={(event) => {          this.handleClick(event);        }}>        Click      </button>      )  }}

直接在render方法中為元素事件定義事件處理函數(shù)，最大的問題是，每次render調(diào)用時，都會重新創(chuàng)建一個新的事件處理函數(shù)，帶來額外的性能開銷，組件所處層級越低，這種開銷就越大。當(dāng)然，大多數(shù)情況下，這種開銷是可以接受的。