React采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写
事件回调的几种写法
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,1)">this)}>写法一</button> <button onClick={this.handler2}>写法二</button> </div> ); } handler2=(e)=>{ console.log('我是写法二',1)">); } }
3.直接在render里写行内的箭头函数(不推荐)
这种写法也可获得this，因为函数的this是指向其调用者。而箭头函数的this指向其定义的外部作用域即render，render的this指向class，最终获得this就是class
import React,1)">this.handler2}>写法二</button> <button onClick={ (e)=>{ .handler3(e) } }>写法三</button> </div> ); } handler3(e){ console.log('我是写法三',1)"> }
4.直接在组件内定义一个非箭头函数的方法，然后在constructor里bind(this)(推荐)
class组件里的构造函数一定要使用super来继承Component
import React,1)"> class App extends Component { constructor(){ super() this.handler4 = this.handler4.bind() } render() { .handler3(e) } }>写法三</button> <button onClick={this.handler4}>写法四</button> </div> ) } handler1(e){ console.log('我是写法一',1)">); } handler4(e){ console.log('我是写法四',1)"> }
这里我一般使用方法二和三
注意：
和普通浏览器一样，事件handler会被自动传入一个 event 对象，这个对象和普通的浏览器 event 对
象所包含的方法和属性都基本一致。不同的是 React中的 event 对象并不是浏览器提供的，而是它自
己内部所构建的。它同样具有 event.stopPropagation 、 event.preventDefault 这种常用的方法
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件举报，一经查实，本站将立刻删除。
