目標：掌握點選事件等事件監聽


import React ,{ Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class Title extends Component {
    // 事件監聽函式會自動傳入一個event物件，跟瀏覽器裡的event功能一致
    // event物件代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態；通常與函式結合使用
    // 這個物件是react在瀏覽器event基礎上封裝的，解決了瀏覽器相容問題
    handleClickOnTitle (event) {
        console.log(event.target.innerHTML);
        console.log(this);  //==> null or undefined

    }
    // 注意：因為傳入時.bind(this,'helloworls'),所以此處引數寫的（e,word),但打印不出helloworld
    // 修改一下，把event放到後邊，就可以了
    handleClickBindThis (word,e){
        console.log(this);  //==> this物件{context:...;props：。。。;等等}
        console.log(word);  //==> 'helloword'
    }
    render () {
        return (
            /*
                on*是react.js封裝好的一系列事件監聽屬性，所以無需考慮瀏覽器相容問題
                沒有特殊處理，這些on*的事件監聽只能用在普通的HTML標籤上
            */
            /*
                1.在h1標籤內：繫結事件this.handleClickOnTitle,實際上是直接呼叫handleClickOnTitle函式，而不是用過this例項的方法呼叫的
                所以不能通過this獲得例項，列印this值為null or undefined
                2.在h2標籤內：手動的通過bind(this)將例項方法和事件監聽方法中的this繫結到當前例項上，可同時繫結其他引數，
                再把繫結後的函式傳給react.js的onClick事件監聽
                3.bind模式在事件監聽中很常見，同樣在渲染列表元素的時候也可以通過bind把列表元素傳入事件監聽函式中
            */
            <div>
                <h1 onClick={this.handleClickOnTitle}>未繫結this</h1>
                <h2 onClick={this.handleClickBindThis.bind(this,'helloworld')}>繫結this例項</h2>
            </div>
        )
    }
}
class Header extends Component {
    render () {
        return (
            <div>
                <span>這裡是</span>
                <Title/>
            </div>
        )
    }
}

ReactDOM.render(
    <Header />,
    document.getElementById('root')
)