React学习笔记 - 事件处理绑定this指向

使用箭头函数

直接编写代码

利用箭头函数自身没有作用域的特点，使用箭头函数处理this指向，但这种方法每次渲染都会创建一个新的函数

class App extends React.Component {
	constructor(){
		this.state = {
			count: 0
		}
	}
	render(){
		return (
			<span>{this.state.count}</span>
			<button onClick={() => {
				this.setState({count:this.state.count + 1})
			}}/>
		}
	}
}

利用箭头函数调用对应函数

class App extends React.Component {
	constructor(){
		this.state = {
			count: 0
		}
	}
	add(){
		this.setState({
			count: this.state.count + 1
		})
	}
	render(){
		return (
			<span>{this.state.count}</span>
			<button onClick={() => {
				this.add()
			}}/>
		}
	}
}

使用Function.prototype.bind()

React的事件处理需要手动绑定this

在constructor()中显示绑定

class App extends React.Component {
	constructor(){
		this.state = {
			count: 0
		}
		this.add = this.add.bind(this)
	}
	add(){
		this.setState({
			count: this.state.count + 1
		})
	}
	render(){
		return (
			<span>{this.state.count}</span>
			<button onClick={this.add}/>
		}
	}
}

在元素标签中使用bind

class App extends React.Component {
	constructor(){
		this.state = {
			count: 0
		}
	}
	add(){
		this.setState({
			count: this.state.count + 1
		})
	}
	render(){
		return (
			<span>{this.state.count}</span>
			<button onClick={this.add.bind(this)}/>
		}
	}
}

proposal-class-fields

class App extends React.Component {
	constructor(){
		this.state = {
			count: 0
		}
	}
	add = ()=>{
		this.setState({
			count: this.state.count + 1
		})
	}
	render(){
		return (
			<span>{this.state.count}</span>
			<button onClick={this.add}/>
		}
	}
}