React学习笔记09- 事件处理

  • React学习笔记09- 事件处理已关闭评论
  • 97 次浏览
  • A+
所属分类:Web前端
摘要

这种写法不需要用bind处理回调函数,因为箭头函数的this指向函数定义的外部作用域即class组件本身

React采用on+事件名的方式来绑定一个事件,注意,这里和原生的事件是有区别的,原生的事件全是小写
onclick , React里的事件是驼峰 onClick ,React的事件并不是原生事件,而是合成事件。
 
事件回调的几种写法

1.直接在组件内定义一个非箭头函数的方法,然后在render里直接使用 onClick=

{this.handleClick.bind(this)} (不推荐)

这种写法需要用bind处理回调函数不然获取不到this
import React, { Component } from 'react'  export default class App extends Component {   render() {     return (       <div>         {/*              和vue不同react绑定事件回调不需要加(),this.handler即可          */}         <button onClick={this.handler1.bind(this)}>写法一</button>       </div>     )   }   handler1(e){     console.log('我是写法一',e,'this:',this);   }   /*     call,改变this指向并自动执行函数    apply,改变this指向并自动执行函数    bind,改变this指向    */ }

2.在组件内使用箭头函数定义一个方法(推荐)

这种写法不需要用bind处理回调函数,因为箭头函数的this指向函数定义的外部作用域即class组件本身

 

import React, { Component } from 'react'  export default class App extends Component {   render() {     return (       <div>         {/*              和vue不同react绑定事件回调不需要加(),this.handler即可          */}         <button onClick={this.handler1.bind(this)}>写法一</button>         <button onClick={this.handler2}>写法二</button>         </div>     )   }   handler1(e){     console.log('我是写法一',e,'this:',this);   }   handler2=(e)=>{     console.log('我是写法二',e,'this:',this);   }    /*     call,改变this指向并自动执行函数    apply,改变this指向并自动执行函数    bind,改变this指向    */ }

 

3.直接在render里写行内的箭头函数(不推荐)

这种写法也可获得this,因为函数的this是指向其调用者。而箭头函数的this指向其定义的外部作用域即render,render的this指向class,最终获得this就是class

import React, { Component } from 'react'  export default class App extends Component {   render() {     return (       <div>         {/*              和vue不同react绑定事件回调不需要加(),this.handler即可          */}         <button onClick={this.handler1.bind(this)}>写法一</button>         <button onClick={this.handler2}>写法二</button>         <button onClick={             (e)=>{                 this.handler3(e)             }         }>写法三</button>       </div>     )   }   handler1(e){     console.log('我是写法一',e,'this:',this);   }   handler2=(e)=>{     console.log('我是写法二',e,'this:',this);   }   handler3(e){     console.log('我是写法三',e,'this:',this);   }   /*     call,改变this指向并自动执行函数    apply,改变this指向并自动执行函数    bind,改变this指向    */ }

4.直接在组件内定义一个非箭头函数的方法,然后在constructor里bind(this)(推荐)

class组件里的构造函数一定要使用super来继承Component

import React, { Component } from 'react'  export default class App extends Component {     constructor(){         super()         this.handler4 = this.handler4.bind(this)       }   render() {     return (       <div>         {/*              和vue不同react绑定事件回调不需要加(),this.handler即可          */}         <button onClick={this.handler1.bind(this)}>写法一</button>         <button onClick={this.handler2}>写法二</button>         <button onClick={             (e)=>{                 this.handler3(e)             }         }>写法三</button>         <button onClick={this.handler4}>写法四</button>        </div>     )   }     handler1(e){     console.log('我是写法一',e,'this:',this);   }   handler2=(e)=>{     console.log('我是写法二',e,'this:',this);   }   handler3(e){     console.log('我是写法三',e,'this:',this);   }   handler4(e){     console.log('我是写法四',e,'this:',this);   }   /*     call,改变this指向并自动执行函数    apply,改变this指向并自动执行函数    bind,改变this指向    */ }

这里我一般使用方法二和三

注意:

和普通浏览器一样,事件handler会被自动传入一个 event 对象,这个对象和普通的浏览器 event 对
象所包含的方法和属性都基本一致。不同的是 React中的 event 对象并不是浏览器提供的,而是它自
己内部所构建的。它同样具有 event.stopPropagation 、 event.preventDefault 这种常用的方法