1.直接在组件内定义一个非箭头函数的方法,然后在render里直接使用 onClick=
{this.handleClick.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指向 */ }
这里我一般使用方法二和三文章来源:https://www.toymoban.com/news/detail-710903.html
注意:文章来源地址https://www.toymoban.com/news/detail-710903.html
到了这里,关于React学习笔记09- 事件处理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!