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>
(๑>ڡ<)☆谢谢老板~
使用微信扫描二维码完成支付
