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}/>
		}
	}
}