React_react中this的指向绑定

1.bind方式原地绑定

class Maa extends React.Component{
	fun(){
		console.log(this)
	}
	
	render(){
		return(
			<div>
				<button onClick={this.fun.bind(this)}>bind绑定</button>
			</div>
		)
	}
}

2.箭头函数进行创建

class Maa extends React.Component{
	fun=()=>{
		console.log(this)
	}
	
	render(){
		return(
			<div>
				<button onClick={this.fun}>箭头函数方式</button>
			</div>
		)
	}
}

3.constructor中提前绑定

class Maa extends React.Component{
	constructor(props){
		super(props)
		this.fun=this.fun.bind(this);
	}
	fun(){
		console.log(this)
	}
	
	render(){
		return(
			<div>
				<button onClick={this.fun}>提前绑定</button>
			</div>
		)
	}
}

4.把时间的调用写成箭头函数的调用方式

class Maa extends React.Component{
	fun(){
		console.log(this)
	}
	
	render(){
		return(
			<div>
				<button onClick={()=>{this.fun()}}>调用方式为箭头函数</button>
			</div>
		)
	}
}