React-事件的函数绑定

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>