一、事件對(duì)象
1.1什么是事件對(duì)象
在觸發(fā)dom上的某個(gè)事件時(shí)會(huì)產(chǎn)生一個(gè)事件對(duì)象event债蓝，這個(gè)對(duì)象包含著所有與事件相關(guān)的信息壳鹤。
1.2 e.target
獲取執(zhí)行事件的dom節(jié)點(diǎn)與原js寫法基本類似
/*箭頭函數(shù)*/
getMsg=(e) =>{
e.target.style.background='red';
console.log( e.target.getAttribute("aid"));
}
/*調(diào)用事件*/
<button aid="btn" onClick={this.getMsg}>事件對(duì)象</button>
二、表單事件饰迹，獲取表單的值
2.1第一種方式：通過事件對(duì)象 e.target.value
（1）具體步驟如下：
- 監(jiān)聽表單的改變事件 onChange
- 在改變的事件里面獲取表單輸入的值
- 把表單輸入的值賦值給對(duì)應(yīng)的state中的變量 this.setState({ age:' 18'})
- 點(diǎn)擊按鈕的時(shí)候獲取state中對(duì)應(yīng)元素的值 this.state.age
（2）DEMO示例：
/*監(jiān)聽改變*/
inputChange=(e)=>{
console.log(e.target.value);
//改變值
this.setState({
age:e.target.value //通過事件對(duì)象獲取值
})
}
/*獲取改變的值*/
getInputValue=(e)=>{
console.log(this.state.age);
}
//調(diào)用方式
<h3>2.1 第一種方式：表單事件:獲取表單元素的值芳誓，通過事件對(duì)象</h3>
<input onChange={this.inputChange}/><button onClick={this.getInputValue}>獲取表單值</button>
2.2第二種方式：使用refs
（1）具體步驟如下：
給標(biāo)簽元素定義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實(shí)現(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號(hào)軟件園2號(hào)樓',
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 //通過事件對(duì)象獲取值
})
}
/*獲取改變的值*/
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>一、事件對(duì)象</h2>
<button aid="btn" onClick={this.getMsg}>事件對(duì)象</button>
<br/>
<br/>
<br/>
<br/>
<h2>二政恍、表單事件</h2>
<h3>2.1 第一種方式：表單事件:獲取表單元素的值褥符，通過事件對(duì)象</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;
