React解决this指向undefined问题的五种方式
为什么 Reate 要改变this的指向性问题
简单来说就是因为Reate中回调要使用this,并且使用的频率非常高,所以this指向必须是我们要掌握的
说明
本文章只是个人见解,是自己用于自己总结一些知识点的,有需要的小伙伴可以借鉴
方法一
1. 高阶函数(柯里化)????
高阶函数:通过 this 来直接调用 handleClick 并返回箭头函数。
???? 柯里化:通过函数调用继续返回函数的形式,实现多次接收参数最后统一处理的函数编码形式。
export default class user extends Component { state = { cound:0 } //this的指向是什么就是看谁调用的 addEvent() { return () => { console.log(this); } } render() { return ( <button onClick={this.addEvent()}></button> ) } }复制代码
方法二????
2.包裹一层箭头函数。
箭头函数中的 this 指向“外部”,即 render 函数,而 render 函数中的 this 正是组件实例。
export default class user extends Component { state = { cound:0 } addEvent() { console.log(this); } render() { return ( <button onClick={() => this.addEvent()}></button> ) } }复制代码
方法三✈
3.使用bind
export default class user extends Component { state = { cound:0 } addEvent() { console.log(this); } render() { return ( <button onClick={this.addEvent.bind(this)}></button> ) } }复制代码
方法四????
4.通过赋值语句往实例上面添加一个箭头函数。
export default class user extends Component { state = { cound:0 } addEvent = () => { console.log(this); } render() { return ( <button onClick={this.addEvent.bind(this)}></button> ) } }复制代码
方法五????
5.在构造函数中再创建一个实例方法,和原型方法公用一个函数体。
class App extends React.Component { constructor() { super() this.state = { count: 0, } this.addClick = this.addClick.bind(this) } addClick() { console.log(this) } render() { return ( <div> <button onClick={this.addClick}>+1</button> </div> ) } }
作者:初学者xt
链接:https://juejin.cn/post/7038870057782345736