React点击事件this绑定的4种方式及传参

第一种:在事件中使用箭头函数(官网推荐使用)

​
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)
        // 你传过来的参数