event物件

React.js 中的 event 物件並不是瀏覽器提供的，而是它自己內部所構建的。React.js 將瀏覽器原生的 event 物件封裝了一下，對外提供統一的 API 和屬性，這樣你就不用考慮不同瀏覽器的相容性問題。
React.js 會給每個事件監聽傳入一個 event 物件，這個物件提供的功能和瀏覽器提供的功能一致，而且它是相容所有瀏覽器的。

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

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

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

React.js 呼叫你所傳給它的方法的時候，並不是通過物件方法的方式呼叫（this.handleClickOnTitle），而是直接通過函式呼叫 （handleClickOnTitle），所以事件監聽函式內並不能通過 this 獲取到例項。

事件中的this

如果你想在事件函式當中使用當前的例項，你需要手動地將例項方法 bind 到當前例項上再傳入給 React.js。

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

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

bind 會把例項方法繫結到當前例項上，然後我們再把繫結後的函式傳給 React.js 的 onClick 事件監聽。
也可以在 bind 的時候給事件監聽函式傳入一些引數：

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

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

練習

不能摸的狗（一）：
有一隻狗，不允許別人摸它，一旦摸它就會叫，然後就跑了。

完成 Dog 元件，當用戶點選的時候會執行自身的 bark 和 run 方法。

class Dog extends Component {
  bark () {
    console.log('bark')
  }
  
  run () {
    console.log('run')
  }
  
  handleClick(){
    this.bark();
    this.run();
  }
  
  render () {
    return (<div onClick = {()=>{this.handleClick()}}>DOG</div>)
  }
}