第一种:在事件中使用箭头函数(官网推荐使用)
import React from 'react'
class LikesButton extends React.Component{
constructor(props){
super(props)
}
increaseClick = (e) =>{
// this:这个组件
console.log(this)
// e:被点击目标的合成事件
console.log(e)
}
render(){
return(
// 在这里不能传参
<div onClick={this.increaseClick}>点击事件</div>
)
}
}
export default LikesButton
第二种:在render中使用箭头函数
注意:此语法问题在于每次渲染LikeButton时都会创建不同的回调函数,在大多数下,这没什么问题,但如果该回调函数作为prop传入子组件时,这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定(第三种)或者是使用class filed(第一种)
import React from 'react'
class LikesButton extends React.Component{
constructor(props){
super(props)
}
increaseClick(e, value){
// 这个组件
console.log(this)
// 合成事件
console.log(e)
// 你传过来的参数
console.log(value)
}
render(){
return(
// 这里可以传参数,比如说你删除的时候传id
<div onClick={(e) => {this.increaseClick(e, 11)}}>点击事件</div>
)
}
}
export default LikesButton
点击并拖拽以移动
第三种:在constructor构造器进行bind绑定(官网推荐使用)
import React from 'react'
class LikesButton extends React.Component{
constructor(props){
super(props)
this.increaseClick = this.increaseClick.bind(this)
}
increaseClick(e){
// 这个组件
console.log(this)
// 合成事件
console.log(e)
}
render(){
return(
// 这里不能传参
<div onClick={this.increaseClick}>点击事件</div>
)
}
}
export default LikesButton
点击并拖拽以移动
第四种:在render中进行bind绑定
import React from 'react'
class LikesButton extends React.Component{
constructor(props){
super(props)
}
increaseClick(value,e){
// 这个组件
console.log(this)
// 传的参数
console.lig(value)
// 合成事件
console.log(e)
}
render(){
return(
// 可以传参
<div onClick={this.increaseClick.bind(this,11)}>点击事件</div>
)
}
}
export default LikesButton
点击并拖拽以移动