React中事件函数写法与this指向总结

React中事件函数写法与this指向总结
 

class App extends Component {
    constructor() {
        super();
        this.state = {
            name: 'abc',
        }
    }

    handleChange() {
        console.log(this) // undefined
        this.setState({ name: 'xyz' })
    }

    render() {
        const { name } = this.state;
        return (
            <input value={name} onChange={this.handleChange} />
        )
    }

}

分析：

首先我们知道，onChange = { this.handleChange } 括号内的环境是该组件，那为什么触发onChaneg事件时，handleChange函数的调用对象却是undefined了？

我们知道，普通函数中this是指向 调用该函数的对象，而onChange、onClick这些鼠标键盘事件得调用对象是 Window这个顶级对象，不是该component组件调用得。

{ this. handleChange }中this指向为该组件，this.handleChange指的组件中的handleChange()函数, 但是handleChange调用对象是window，在react 环境下指向为 undefined，

所以点击时，handleChange函数中的this指向为undefined。

为了纠正this的指向，使得this指向该组件，有以下解决方法：

1. bind 绑定this 指向

写法1: 

onChange = { this.handleChange.bind(this) }

分析：首先我们知道,普通函数中this是指向 调用该函数的对象,所以只要把handleChaneg函数绑定到该组件App环境下，那么函数中this就指向该组件App了,这里{} 内环境是App组件，所以bind（this），就是把该函数绑定到App组件内，所以函数内部的this指向就明确了，指向App组件；

写法2:

onChange = { this.handleChange }

然后在constructor中绑定this。

this.handlechange = this.handlechange.bind(this);

2. 把onChange中的函数写成箭头函数

onChange = {()=> {this.handleChange()}}

分析：因为箭头函数内部this指向定义该函数时父级的环境，也就是input 标签所处的环境，也就是该App组件。

3. 把handleChange这个函数体写成箭头函数的形式

    handleChange = () => {
        console.log(this) //App组件
        this.setState({ name: 'xyz' })
    }

分析：handleChange 函数内this指向定义该函数时父级所处的环境，也就是App组件；

 

本文基于原作者的内容，进行了排版和优化。谢谢。
————————————————
版权声明：本文为CSDN博主「733路况」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/skfhxiaodangjia/article/details/113697032