解决react中this指向的问题

方法一

高阶函数：通过 this 来直接调用 handleClick 并返回箭头函数。

代码如下：

export default class App extends Component {
	state = {
		count: 0
	}
	handelClick() {
		// this指向实例对象
		// console.log(this.state.count)
		return () => {
			// 箭头函数没有自己的this,会向外部找, this指向外部,也指向实例对象
			console.log(this.state.count)
		}
	}
	render() {
		return (
			<div style={{ textAlign: 'center' }}>
				<h2>计数器:{this.state.count}</h2>
				<button onClick={this.handelClick()}>+1</button>
			</div>
		)
	}
}

 

 方法二

包裹一层箭头函数。箭头函数中的 this 指向“外部”，即 render 函数，而 render 函数中的 this 正是组件实例。

export default class App extends Component {
	state = {
		count: 0
	}
	handelClick() {
		//
		console.log(this.state.count)
	}
	render() {
		return (
			<div style={{ textAlign: 'center' }}>
				<h2>计数器:{this.state.count}</h2>
				{/* 外面包一层箭头函数 */}
				<button
					onClick={() => {
						this.handelClick()
					}}
				>
					+1
				</button>
			</div>
		)
	}
}

方法三

使用 bind。

export default class App extends Component {
	state = {
		count: 0
	}
	handelClick() {
		//
		console.log(this.state.count)
	}
	render() {
		return (
			<div style={{ textAlign: 'center' }}>
				<h2>计数器:{this.state.count}</h2>
				{/* 外面包一层箭头函数 */}
				<button onClick={this.handelClick.bind(this)}>+1</button>
			</div>
		)
	}
}

#扩展

关于 class 中的实例方法和原型方法？

原型方法演示

class App {
    handleClick() {}
}

const app1 = new App()
const app2 = new App()
// 通过打印也能发现 handleClick 确实是挂载到原型上的
console.log(app1)
// 每一个实例访问到的都是挂载到原型上的方法，所以等价
console.log(app1.handleClick === app2.handleClick)

实例方法演示

class App {
    handleClick = () => {}
}

const app1 = new App()
const app2 = new App()
// 通过打印也能发现 handleClick 确实是挂载到实例上的
console.log(app1)
// 每一个实例访问到的都是挂载到自己上的方法，所以不等价
console.log(app1.handleClick === app2.handleClick)

所以，要明白在 class 中直接写的方法和通过赋值语句添加的方法本质上不一样。

注意：在 constructor 中挂载的方法也是实例方法。

方法四

通过赋值语句往实例上面添加一个箭头函数。

export default class App extends Component {
	state = {
		count: 0
	}

	handelClick = (e) => {
		// 实例方法
		console.log(this.state.count)
	}
	render() {
		return (
			<div style={{ textAlign: 'center' }}>
				<h2>计数器:{this.state.count}</h2>
				<button onClick={this.handelClick}>+1</button>
			</div>
		)
	}
}

证明“外层” this 确实是组件实例  

class App {
    temp = this
}

const app = new App()
console.log(app === app.temp)

方法五

在构造函数中再创建一个实例方法，和原型方法公用一个函数体。

export default class App extends Component {
  constructor() {
    super()
		this.state = {
			count: 0
		}
		// 重新创建实例方法 改变函数的方法生成新方法赋值给创建的方法
		this.handelClick = this.handelClick.bind(this)
	}

	handelClick(e) {
		// 实例方法
		console.log(this.state.count)
	}
	render() {
		return (
			<div style={{ textAlign: 'center' }}>
				<h2>计数器:{this.state.count}</h2>
				<button onClick={this.handelClick}>+1</button>
			</div>
		)
	}
}