事件監聽

時間 2019-12-07

標籤事件監聽简体版

原文原文鏈接

在 React.js 裏面監聽事件是很容易的事情，你只須要給須要監聽事件的元素加上屬性相似於 onClick、onKeyDown 這樣的屬性，例如咱們如今要給 Title 加上點擊的事件監聽：html

class Title extends Component {
  handleClickOnTitle () {
    console.log('Click on title.')
  }

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle}>React 小書</h1>
    )
  }
}

只須要給 h1 標籤加上 onClick 的事件，onClick 緊跟着是一個表達式插入，這個表達式返回一個 Title 本身的一個實例方法。當用戶點擊 h1 的時候，React.js 就會調用這個方法，因此你在控制檯就能夠看到 Click on title. 打印出來。react

在 React.js 不須要手動調用瀏覽器原生的 addEventListener 進行事件監聽。React.js 幫咱們封裝好了一系列的 on* 的屬性，當你須要爲某個元素監聽某個事件的時候，只須要簡單地給它加上 on* 就能夠了。並且你不須要考慮不一樣瀏覽器兼容性的問題，React.js 都幫咱們封裝好這些細節了。git

React.js 封裝了不一樣類型的事件，這裏就不一一列舉，有興趣的同窗能夠參考官網文檔： SyntheticEvent - React，多嘗試不一樣的事件。另外要注意的是，這些事件屬性名都必需要用駝峯命名法。github

沒有通過特殊處理的話，這些 on* 的事件監聽只能用在普通的 HTML 的標籤上，而不能用在組件標籤上。也就是說，<Header onClick={…} /> 這樣的寫法不會有什麼效果的。這一點要注意，可是有辦法能夠作到這樣的綁定，之後咱們會說起。如今只要記住一點就能夠了：這些 on* 的事件監聽只能用在普通的 HTML 的標籤上，而不能用在組件標籤上。瀏覽器

event 對象

和普通瀏覽器同樣，事件監聽函數會被自動傳入一個 event 對象，這個對象和普通的瀏覽器 event 對象所包含的方法和屬性都基本一致。不一樣的是 React.js 中的 event 對象並非瀏覽器提供的，而是它本身內部所構建的。React.js 將瀏覽器原生的 event 對象封裝了一下，對外提供統一的 API 和屬性，這樣你就不用考慮不一樣瀏覽器的兼容性問題。這個 event 對象是符合 W3C 標準（ W3C UI Events ）的，它具備相似於event.stopPropagation、event.preventDefault 這種經常使用的方法。函數

咱們來嘗試一下，此次嘗試當用戶點擊 h1 的時候，把 h1 的 innerHTML 打印出來：this

class Title extends Component {
  handleClickOnTitle (e) {
    console.log(e.target.innerHTML)
  }

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle}>React 小書</h1>
    )
  }
}

再看看控制檯，每次點擊的時候就會打印」React 小書「。spa

關於事件中的 this

通常在某個類的實例方法裏面的 this 指的是這個實例自己。可是你在上面的 handleClickOnTitle 中把 this 打印出來，你會看到 this 是 null 或者 undefined。code

...
  handleClickOnTitle (e) {
    console.log(this) // => null or undefined
  }
...

這是由於 React.js 調用你所傳給它的方法的時候，並非經過對象方法的方式調用（this.handleClickOnTitle），而是直接經過函數調用（handleClickOnTitle），因此事件監聽函數內並不能經過 this 獲取到實例。htm

若是你想在事件函數當中使用當前的實例，你須要手動地將實例方法 bind 到當前實例上再傳入給 React.js。

class Title extends Component {
  handleClickOnTitle (e) {
    console.log(this)
  }

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle.bind(this)}>React 小書</h1>
    )
  }
}

bind 會把實例方法綁定到當前實例上，而後咱們再把綁定後的函數傳給 React.js 的 onClick 事件監聽。這時候你再看看，點擊 h1 的時候，就會把當前的實例打印出來：

你也能夠在 bind 的時候給事件監聽函數傳入一些參數：

class Title extends Component {
  handleClickOnTitle (word, e) {
    console.log(this, word)
  }

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle.bind(this, 'Hello')}>React 小書</h1>
    )
  }
}

這種 bind 模式在 React.js 的事件監聽當中很是常見，bind 不只能夠幫咱們把事件監聽方法中的 this 綁定到當前組件實例上；還能夠幫助咱們在在渲染列表元素的時候，把列表元素傳入事件監聽函數當中——這個將在之後的章節說起。

若是有些同窗對 JavaScript 的 this 模式或者 bind 函數的使用方式不是特別瞭解到話，可能會對這部份內容會有些迷惑，能夠補充對 JavaScript 的 this 和 bind相關的知識再來回顧這部份內容。