React React的事件处理

React事件处理

1 事件绑定

• 语法：on +事件名 = { 事件方法 }
• 事件采用驼峰命名法
• 例：onClick={()=>{changeWord}}

2 事件绑定this指向

1. 箭头函数

   • 利用箭头函数自身不绑定this的特点。

     addNum (){
     	this.setState({
             
         })
     }
     //...省略
     render(){
         return(
         	<button onClick={()=>this.addNum()}>+1</button>
         )
     }
     

2. Function.prototype.bind()

   • ES5中的bind()方法，将事件处理程序中的this与组件实例绑定到一起。

     constructor(){
         super()
         this.addNum = this.addNum.bind(this)
     }
     //...省略
     render(){
         return(
         	<button onClick={this.addNum}>+1</button>
         )
     }
     

3. class的实例方法

   • 利用箭头函数形式的class实例方法。

     addNum = ()=>{
     	this.setState({
             
         })
     }
     //...省略
     render(){
         return(
         	<button onClick={this.addNum}>+1</button>
         )
     }