一、事件對象

1.1什么是事件對象

在觸發(fā)dom上的某個事件時會產(chǎn)生一個事件對象event，這個對象包含著所有與事件相關的信息。

1.2 e.target

獲取執(zhí)行事件的dom節(jié)點與原js寫法基本類似

/*箭頭函數(shù)*/
getMsg=(e) =>{
    e.target.style.background='red';
    console.log( e.target.getAttribute("aid"));
}
 
 /*調用事件*/
<button aid="btn" onClick={this.getMsg}>事件對象</button>

二、表單事件，獲取表單的值

2.1第一種方式：通過事件對象 e.target.value

（1）具體步驟如下：

• 監(jiān)聽表單的改變事件 onChange
• 在改變的事件里面獲取表單輸入的值
• 把表單輸入的值賦值給對應的state中的變量 this.setState({ age:' 18'})
• 點擊按鈕的時候獲取state中對應元素的值 this.state.age

（2）DEMO示例：

/*監(jiān)聽改變*/
inputChange=(e)=>{
    console.log(e.target.value);

    //改變值
    this.setState({
        age:e.target.value  //通過事件對象獲取值
    })
}

/*獲取改變的值*/
getInputValue=(e)=>{
    console.log(this.state.age);
}

//調用方式
<h3>2.1 第一種方式：表單事件:獲取表單元素的值，通過事件對象</h3>
<input onChange={this.inputChange}/><button onClick={this.getInputValue}>獲取表單值</button>

2.2第二種方式：使用refs

（1）具體步驟如下：
給標簽元素定義ref屬性
通過refs獲取值，this.refs.msg.value
（2）demo示例

/*監(jiān)聽改變*/
inputChange2=(e)=>{
    let val=this.refs.userAddress.value;
    this.setState({
        userAddr:val  //通過refs獲取
    })
}

/*獲取改變的值*/
getInputValue2=(e)=>{
    console.log(this.state.userAddr);
}

<h3>2.2 第二種方式：表單事件:獲取變單元素的值，this.refs.屬性</h3>
<input onChange={this.inputChange2} ref="userAddress"/><button onClick={this.getInputValue2}>獲取表單值</button>

三、鍵盤事件

鍵盤事件與js中的鍵盤事件效果一致；

3.1 onKeyUp

3.2 onKeyDown

四、雙向數(shù)據(jù)綁定

model改變影響view，view改變反過來影響model；
在vue中通過v-model實現(xiàn)雙向綁定；

五、DEMO完整示例

import React from 'react';

class ClickBindItem extends React.Component{
    constructor(props){
        super(props);

        //定義數(shù)據(jù)
        this.state={
            name:'張三',
            age:'',
            address:'山東省青島市市南區(qū)寧夏路288號軟件園2號樓',
            userAddr:''
        }
    }


    /*箭頭函數(shù)*/
    getMsg=(e) =>{
        alert(this.state.name);
        console.table(e);

        e.target.style.background='red';
        console.log( e.target.getAttribute("aid"));
    }

    /*監(jiān)聽改變*/
    inputChange=(e)=>{
        console.log(e.target.value);

        //改變值
        this.setState({
            age:e.target.value  //通過事件對象獲取值
        })
    }

    /*獲取改變的值*/
    getInputValue=(e)=>{
        console.log(this.state.age);
    }

    /*監(jiān)聽改變*/
    inputChange2=(e)=>{
        let val=this.refs.userAddress.value;
        this.setState({
            userAddr:val  //通過refs獲取
        })
    }

    /*獲取改變的值*/
    getInputValue2=(e)=>{
        console.log(this.state.userAddr);
    }

    render() {
        return(
           <div>
               <h2>一、事件對象</h2>
                <button aid="btn" onClick={this.getMsg}>事件對象</button>
               <br/>
               <br/>
               <br/>
               <br/>
               <h2>二、表單事件</h2>
               <h3>2.1 第一種方式：表單事件:獲取表單元素的值，通過事件對象</h3>
               <input onChange={this.inputChange}/><button onClick={this.getInputValue}>獲取表單值</button>
               <br/>
               <br/>
               <br/>
               <br/>
               <h3>2.2 第二種方式：表單事件:獲取變單元素的值，this.refs.屬性</h3>
               <input onChange={this.inputChange2} ref="userAddress"/><button onClick={this.getInputValue2}>獲取表單值</button>
               <br/>
               <br/>
               <br/>
               <br/>
               <h2>鍵盤事件</h2>

           </div>
        )
    }

}
export default  ClickBindItem;