React学习04----点击事件，函数的使用

最新推荐文章于 2024-08-19 19:47:14 发布

zhaihaohao1

最新推荐文章于 2024-08-19 19:47:14 发布

阅读量521

点赞数 1

分类专栏： React

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/87855971

版权

本文介绍了在React中遇到点击事件触发函数时，由于`this`指向问题导致无法访问`state`的错误。通过分析项目结构，展示了在Home1.js中调用`getData()`函数时出现的`TypeError`。文章详细讲解了三种解决方案：1) 使用箭头函数；2) 在函数调用时改变`this`指向；3) 在构造函数中绑定`this`。此外，还提到了如何在带有参数的函数中正确使用这些方法，并提供了源码下载链接。

摘要由CSDN通过智能技术生成

项目结构：
在这里插入图片描述

定义一个函数getData() 点击按钮后调用函数
Home1.js 代码：

import React from 'react';

import '../assets/css/index.css';

/**
 * 定义函数
 */
class Home1 extends React.Component{
    // 子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象
    constructor(props){
        super(props);   //固定写法

        this.state={
            msg:'我是一个home组件',
            message:'我是一个message',
            username:'itying'
        }

    }
    // 定义一个函数
    getData(){
        // 执行这个 alert(this.state.name); 会报错
        // Uncaught TypeError: Cannot read property 'state' of undefined
        //原因是 this不是Home1 的当前对象
        //需要使用箭头函数改变this的指向
        alert(this.state.name);
    }

    render(){
        return(
            <div>
                <button onClick={this.getData}>调用方法</button>
            </div>
        )

    }
}
export default Home1;

但是在Home1.js 中在函数 getData() 中 alert(this.state.name);报错
Uncaught TypeError: Cannot