React-事件的函数绑定
1.React内的事件名,均使用驼峰式写法:
(1). onClick
(2).onKeyDown
(3).onMouseOver
…
2.绑定函数的方法
(1).第一种(不常用)
class MyFirst extends React.Component {
/*构造器*/
constructor(props){
super(props);//调用父类的构造函数 用于初始化props属性
this.state={
name:'张三',
age:18,
msg:'MyFirst组件'
}
this.changeAge=this.changeAge.bind(this);// bind用于锁定this指向,使该方法内的this始终指向本组件。
};
changeAge(){
this.setState({
age:19
})
};
render(){
return (
<div>
<h1>{this.state.msg}</h1>
<p>{this.state.name}</p>
<p>{this.state.age}</p>
<p>{this.props.a}</p>
<button onClick={this.changeAge}>click me change age</button>
</div>
)
}
}
类似句柄方式
(2)第二种:直接写
将构造器中的this.changeAge去除,button标签改成下述写法
<button onClick={this.changeAge.bind(this)}>click me</button>
即可
(3)第三种:箭头函数 (常用)
<button onClick={()=>{this.changeAge();}}>click me</button>