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

第一种:在事件中使用箭头函数

import React from 'react'
class LikesButton extends React.Component{constructor(props){super(props)}increaseClick = () =>{console.log('第一种点击方式',this)}render(){return(<div onClick={this.increaseClick}>点击事件</div>)}
}
export default LikesButton

第二种：在render中使用箭头函数

import React from 'react'
class LikesButton extends React.Component{constructor(props){super(props)}increaseClick(){console.log('第二种改变this的方法', this)}render(){return(<div onClick={() => {this.increaseClick()}}>点击事件</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(){console.log('第三种改变this的方法', this)}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(){console.log('第四种改变this的方法', this)}render(){return(<div onClick={this.increaseClick.bind(this)}>点击事件</div>)}
}
export default LikesButton