React學習筆記（三）表單事件、鍵盤事件、雙向數據綁定

事件對象

在觸發DOM上的某個事件時，會產生一個事件對象event，這個對象包含着全部與事件有關的信息。
console.log(event) 能夠打印事件信息，
console.log(event.target)能夠打印當前執行事件的這個DOM節點的信息。
獲取了DOM節點信息後就能夠對DOM進行操做，好比改變觸發事件的按鈕的背景色：
event.target.style.background='green';
點擊按按鈕觸發事件後將按鈕的背景色改成綠色。
也能夠自定義屬性，而後經過event對象獲取，好比：
<button zdy="non" onClick={this.run}>事件對象</button>
自定義了屬性zdy，能夠經過event對象獲取zdy的值：
event.target.getAttribute('zdy');

表單事件

在文本框中輸入的數據，點擊button獲取：

第一種方法：event.target.value

①、監聽input
②、獲取輸入的數據給this、state中的一個數據存儲
③、button獲取數據。

return (
            <div>
                <input onChange={this.inputChange}/> <button zdy="non" onClick={this.run}>事件對象</button>
            </div>
        );
    } 
複製代碼

第二種方法: ref

跟第一種方法類似，只是添加了ref屬性。 經過ref屬性獲取input的值，不用時刻監聽input。

鍵盤事件

鍵盤事件跟js沒有多少區別：

其餘鍵盤事件都是同樣的。

相似於vue的雙向數據綁定

雙向數據綁定就是model改變影響view，反過來view改變也影響model。

constructor(props){
        super(props);
        this.state={
            msg:'1'
        }
    }
    inputChange=(e)=>{
        this.setState({
            msg:e.target.value
        })
    }
    
    render() {
        return (
            <div>
                <h2>雙向數據綁定</h2>
                <input value={this.state.msg} onChange={this.inputChange}/>
                <p>{this.state.msg}</p>
            </div>
        );
    }
複製代碼