一、事件对象
1.1什么是事件对象
在触发dom上的某个事件时会产生一个事件对象event，这个对象包含着所有与事件相关的信息。
1.2 e.target
获取执行事件的dom节点与原js写法基本类似
/*箭头函数*/
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）具体步骤如下：
- 监听表单的改变事件 onChange
- 在改变的事件里面获取表单输入的值
- 把表单输入的值赋值给对应的state中的变量 this.setState({ age:' 18'})
- 点击按钮的时候获取state中对应元素的值 this.state.age
（2）DEMO示例：
/*监听改变*/
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示例
/*监听改变*/
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
四、双向数据绑定
model改变影响view，view改变反过来影响model；
在vue中通过v-model实现双向绑定；
五、DEMO完整示例
import React from 'react';
class ClickBindItem extends React.Component{
constructor(props){
super(props);
//定义数据
this.state={
name:'张三',
age:'',
address:'山东省青岛市市南区宁夏路288号软件园2号楼',
userAddr:''
}
}
/*箭头函数*/
getMsg=(e) =>{
alert(this.state.name);
console.table(e);
e.target.style.background='red';
console.log( e.target.getAttribute("aid"));
}
/*监听改变*/
inputChange=(e)=>{
console.log(e.target.value);
//改变值
this.setState({
age:e.target.value //通过事件对象获取值
})
}
/*获取改变的值*/
getInputValue=(e)=>{
console.log(this.state.age);
}
/*监听改变*/
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;
