React學習——Day9

一、在React中爲按鈕綁定點擊事件

1. 事件的名稱都是React提供的，因此名稱的首字母必須大寫：onClick、onMouseOver。事件名是小駝峯命名。
2. 爲事件提供的處理函數，必須是如下格式：

onClick = {function}

3. 用的最多的事件綁定形式爲：

<button onClick={ () => this.show('傳參') }>按鈕</button>
// 事件的處理函數，需要定義爲一個箭頭函數，然後賦值給函數名稱
show = (arg1) => {
	console.log("show方法" + arg1);
}

以下代碼演示了在React中爲按鈕綁定點擊事件：

class BindEvent extends React.Component{
    constructor(){
        super();
        this.state = {}
    }
    render(){
        return <div>
            <button onClick={ () => {this.show("🐖")} }>按鈕</button>
        </div>
    }
    show = (arg1) => {
            console.log("Hello, " + arg1);
    }
}

事件處理函數都寫成箭頭函數的形式能夠保證大多數情況下事件處理程序能夠按照我們預想的方式執行（this指向組件類）。

二、使用this.setState修改state上的數據

在React中，如果想要修改state中的數據，推薦使用this.setState({})
看下面的代碼：

class BindEvent extends React.Component{
    constructor(){
        super();
        this.state = {
            msg: "王者榮耀"
        }
    }
    render(){
        return <div>
            <button onClick={ () => {this.show()} }>按鈕</button>
            <h3>{this.state.msg}</h3>
        </div>
    }
    show = () => {
            this.setState({
                msg: "英雄殺"
            });
    }
}

點擊按鈕，頁面上的值會從“王者榮耀”變爲“英雄殺”，但是如果在show方法中，我們直接使用this.state修改msg的值，當我們點擊按鈕時，雖然msg的值被改變了，但是頁面上依然顯示“王者榮耀”。

三、this.setState的兩個注意點

• setState只會把對應的state狀態更新，而不會覆蓋其它的state狀態。
• this.setState方法的執行是異步的，如果我們在調用完this.setState之後想立即拿到最新的state值，需要使用this.setState({}, callback)。

四、React中綁定文本框與state中的值

注意：如果我們只是把文本框的value屬性綁定到了state狀態，但是，如果不提供onChange處理函數的話，得到的文本框將會是一個只讀的文本框。

單向綁定

以下代碼演示了上述過程：

class BindInput extends React.Component{
    constructor(){
        super();
        this.state = {
            msg: "OPPO"
        }
    }
    render(){
        return <div>
            <input type="text" style={{width: "100%"}} value={this.state.msg} onChange={(e) => {this.textChanged(e)}}/>
            <h3>{this.state.msg}</h3>
        </div>
    }
    textChanged = (e) => {
            this.setState({
                msg: e.target.value
            })
    }
}

以上是通過事件對象e來獲取對文本框的引用；在React中還可以使用ref來獲取對DOM元素的引用：React爲頁面上的元素提供了ref屬性，如果要獲取元素的引用，可以使用this.refs.引用名稱。
這裏大部分人可能會想：獲取某個DOM元素還不簡單？直接用document.getElementById()等一系列方法不行嗎？行，但是React的誕生就是爲了減少DOM操作，它與jQuery算是一生之敵，畢竟React就是爲了取代jQuery的。
效果如下:

<h3>標籤中的值實時反映了state中的值，可以看到以上實現了文本框中的值與state中值的雙向綁定。