React改变事件处理函数内部this指向的三种方法

最新推荐文章于 2024-09-11 07:24:30 发布

原创最新推荐文章于 2024-09-11 07:24:30 发布 · 1.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react #this

web全栈行走轨迹专栏收录该内容

7 篇文章

订阅专栏

本文探讨了在React组件中处理事件时，如何确保事件处理函数内部的`this`正确指向组件实例。介绍了三种方法：1) 在事件绑定时使用箭头函数；2) 在构造函数中绑定；3) 使用匿名函数调用。这些方法旨在解决因`this`丢失导致无法访问`state`等组件属性的问题。

简介：

在以类继承的方式定义的组件中，为了能方便的调用当前组件的其他成员的属性或方法，如 this.state，通常需要将事件处理函数运行时的this指向当前组件实例。

如下面代码所示，在button组件中调用事件处理函数getmessage，而在getMessage内部调用了this.state，但是当前写法下，函数内部的this并不指向当前实例，所以会报找不到state的错误。

import React from 'react';

class Home extends React.Component {

    constructor(props){
        super(props);

        this.state={
            message:'this is the message'
        }
    }

    getMessage(){
        alert(this.state.message);//此处会报错，因为this不指向当前实例
    }

    render(){

        return(
            <div>
                <button onClick={this.getMessage}>show message</button>
            </div>
        )
    }
}

export default Home

方法一：在button上调用函数时绑定

 <div>
     <button onClick={this.getMessage.bind(this)}>show message</button>
 </div>

方法二：在构造函数内进行绑定

this.getMessage=this.getMessage.bind(this);

方法三：将getMessage方法变成匿名调用

getMessage=()=>{
        alert(this.state.message);
    }