react 事件
在以类继承的方式定义的组件中，为了能方便地调用当前组件的其他成员方法或属性（如：this.state），通常需要将事件处理函数运行时的 this 指向当前组件实例。
绑定事件处理函数this的几种方法：
第一种方法：
run(){
alert(this.state.name)
}<button onClick={this.run.bind(this)}>按钮</button>第二种方法：
构造函数中改变
this.run = this.run.bind(this);
run(){
alert(this.state.name)
}
<button onClick={this.run}>按钮</button>第三种方法（推荐）：
run=()=> {
alert(this.state.name)
}
<button onClick={this.run}>按钮</button>
获取数据
第一种改变this指向的方法
getData(){
alert(this.state.msg);
}<button onClick={this.getData.bind(this)}>获取数据</button>第二种改变this指向的方法
this.getMessage= this.getMessage.bind(this);getMessage(){
alert(this.state.message);
}<button onClick={this.getMessage}>获取数据</button>第三种改变this指向的方法
getName=()=>{
alert(this.state.username);
}<button onClick={this.getName}>获取数据</button>改变数据
改变state里面的值
setData=()=>{
//改变state的值
this.setState({
msg:"我是一个home组件 这是改变后的值"
})
}<button onClick={this.setData}>改变值</button>执行方法传值
单数据
setName=(str)=>{
//改变state的值
this.setState({
username:str
})
}<button onClick={this.setName.bind(this,'张三')}>执行方法传值</button>多数据
<button onClick={this.setName.bind(this,'张三','李四')}>执行方法传值</button> 键盘事件
键盘抬起
inputKeyUp=(e)=>{
console.log(e.keyCode);
if(e.keyCode==13){
alert(e.target.value);
}
}<input onKeyUp={this.inputKeyUp}/>键盘按下
inputonKeyDown=(e)=>{
console.log(e.keyCode);
if(e.keyCode==13){
alert(e.target.value);
}
}<input onKeyDown={this.inputonKeyDown}/>表单事件
获取表单的值
1、监听表单的改变事件onChange
2、在改变的事件里面获取表单输入的值：ref获取
3、把表单输入的值赋值给username：this.setState({})
4、点击按钮的时候获取 state里面的username：this.state.username
inputChange=()=>{
/*
获取dom节点
1、给元素定义ref属性
<input ref="username" />
2、通过this.refs.username 获取dom节点
*/
let val=this.refs.username.value;
this.setState({
username:val
})
}<input ref="username" onChange={this.inputChange}/> 获取input的值
getInput=()=>{
alert(this.state.username);
}<button onClick={this.getInput}>获取input的值</button>双向数据绑定
model改变影响View
view改变反过来影响model
inputChange=(e)=>{
this.setState({
username:e.target.value
})
}
setUsername=()=>{
this.setState({
username:'李四'
})
}<input value={this.state.username} onChange={this.inputChange}/>
{this.state.username}
<button onClick={this.setUsername}>改变username的值</button>
LGS
(๑＞ڡ＜)☆谢谢老板~
使用微信扫描二维码完成支付
