在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如:this.state),通常需要将事件处理函数运行时的 this 指向当前组件实例。
一、绑定事件处理函数this的几种方法
1.1 第一种方法:在onClick事件中直接使用bind(this)
//定义函数
run(){
alert(this.state.name)
}
//调用函数
<button onClick={this.run.bind(this)}>按钮</button>
1.2 第二种方法:构造函数中改变
//在构造函数中改变this指向
this.run = this.run.bind(this);
//定义函数
run(){
alert(this.state.name)
}
//调用函数
<button onClick={this.run>按钮</button>
1.3 第三种方法:使用箭头函数
//定义箭头函数
run=() => {
alert(this.state.name)
}
//调用函数
<button onClick={this.run>按钮</button>
二、改变属性值
改变属性值时,this的改变与绑定时一致,最常用的是箭头函数
this.setState({
name:'李四',
age:'35',
address:'青岛市李沧区书院路123号'
}
)
定义箭头函数如下:
//改变属性值
setMsg=() =>{
this.setState({
name:'李四',
age:'35',
address:'青岛市李沧区书院路123号'
}
)
}
调用箭头函数如下:
<button type="button" className="btn btn-primary" onClick={this.setMsg}>改变属性值</button>
三、完整DEMO示例
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
//定义组件
class MethodClick extends React.Component{
constructor(props){
super(props);
//定义数据
this.state={
name:'张三',
age:'23',
address:'山东省青岛市市南区宁夏路288号软件园2号楼'
}
//第二种方式:在构造函数中改变this
this.getAge=this.getAge.bind(this);
}
//第一种方式:onClick={this.getName.bind(this)
getName(){
alert(this.state.name);
}
//第二种方式:在构造函数中改变this
getAge(){
alert(this.state.age);
}
//第三种方式:使用箭头函数,使用频率最高
getAddress=() =>{
alert(this.state.address);
}
//改变属性值
setMsg=() =>{
this.setState({
name:'李四',
age:'35',
address:'青岛市李沧区书院路123号'
}
)
}
render() {
return (
<div>
<ul className="list-group">
<li className="list-group-item list-group-item-primary">姓名:{this.state.name}</li>
<li className="list-group-item list-group-item-success">姓龄:{this.state.age}</li>
<li className="list-group-item list-group-item-info">地址:{this.state.address}</li>
</ul>
<br/>
<br/>
<button type="button" className="btn btn-primary" onClick={this.getName.bind(this)}>获取当前姓名</button>
<br/>
<br/>
<button type="button" className="btn btn-success" onClick={this.getAge}>获取当前年龄</button>
<br/>
<br/>
<button type="button" className="btn btn-info" onClick={this.getAddress}>获取当前地址</button>
<br/>
<br/>
<button type="button" className="btn btn-primary" onClick={this.setMsg}>改变属性值</button>
</div>
)
}
}
export default MethodClick;//导出组件
网友评论