1、案例实现代码
import React, { Component } from 'react';
/**
* 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
* 事件对象: 在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有与事件有关的信息
* 表单事件: 获取表单的值
* 1、监听表单的改变事件 ---onChange
* 2、在改变的事件里面获取表单输入的值 ---event
* 3、把表单输入的值赋值给username ---inputChange
* 4、点击按钮的时候获取state里面的username ---getInput
* ref获取dom节点: 获取表单的值
* 1、监听表单的改变事件 ---onChange
* 2、在改变的事件里面获取表单输入的值 ---ref
* 3、把表单输入的值赋值给username ---inputChange
* 4、点击按钮的时候获取state里面的username ---getInput
*键盘事件:
* 1、onKeyUp
* 2、onKeyDown
*react实现类似Vue双向数据绑定
* 1、 <input value={this.state.username} onChange={this.inputChange1}/>
* 2、inputChange1=(e)=>{
this.setState({
username:e.target.value
})
}
*
*/
class Home5 extends Component{
constructor(props){
super(props);
this.state={
title:'这是Home5',
username:"杨文杰"
}
}
/**
* 一般通过这个事件对象获取Dom节点，即event.target
* 通过event获取dom属性，即event.target.getAttribute
* @param event 事件对象
*/
run=(event)=>{
alert(this.state.title)
alert(event.target) ;//获取Dom节点 ，一般也只是获取Dom节点
event.target.style.background='red';
//获取Dom的属性的值
alert(event.target.getAttribute('aid'))
}
/**
* 获取表单的值
* @param e
*/
inputChange=(e)=>{
console.log(e.target.value);
this.setState({
username:e.target.value
});
}
getInput=()=>{
alert(this.state.username)
}
/**
* Ref获取表单值
* @param e
*/
inputChangeRef=(e)=>{
/**
* 获取Dom节点
* 1、给元素定义ref属性
* <input ref="username" />
* 2、 通过this.refs.username 获取Dom节点
*/
let val = this.refs.username.value;
this.setState({
username:val
})
}
getInputRef=()=>{
alert(this.state.username)
}
/**
* 键盘事件
* @param e
*/
inputKeyUp=(e)=>{
console.log(e.keyCode);
if(e.keyCode){
alert(e.target.value);
}
}
inputKeyDown=(e)=>{
console.log(e.keyCode);
if(e.keyCode){
alert(e.target.value);
}
}
/**
* 双向数据绑定
* @param e
*/
inputChange1=(e)=>{
this.setState({
username:e.target.value
})
}
changeUsernameValue=(e)=>{
this.setState({
username:"改变了"
})
}
render(){
return(
<div>
{this.state.title}
<p>事件对象演示</p>
<button aid ="" onClick={this.run}>事件对象</button>
<br/>
<p>表单事件对象演示</p>
<input onChange={this.inputChange}/><button onClick={this.getInput}>获取input输入框值</button>
<br/>
<p>表单事件对象演示---ref获取表单值</p>
<input ref="username" onChange={this.inputChangeRef}/><button onClick={this.getInputRef}>获取input输入框值</button>
<br/>
<p>键盘事件</p>
<input onKeyUp={this.inputKeyUp}/><button>键盘事件</button>
<br/>
<input onKeyDown={this.inputKeyDown}/><button>键盘事件</button>
<br/>
<p>双向数据绑定---model改变影响view view改变反过来影响model</p>
<input value={this.state.username} onChange={this.inputChange1}/>
{this.state.username}
<br/>
<button onClick={this.changeUsernameValue}>双向数据修改</button>
</div>
)
}
}
export default Home5;