React开发中点击onClick按钮时报showTest未定义错误该如何解决？

错误原因 #

• 第一，类组件内部定义的属性/方法，在render中访问必须加this前缀，你直接写showText相当于访问全局作用域下的该变量，自然会报未定义错误。如果你控制台实际报错的是showTest未定义，还要检查代码中是否存在变量名拼写错误，把showText错写为了showTest。
• 第二，你当前的showText写法是直接执行alert语句，将alert的返回值赋值给showText，并不是定义一个点击时触发的函数，会导致页面渲染时就直接弹出提示，而不是点击按钮才触发。

修正后的代码 #

import React from 'react';
import reactDom from 'react-dom';
        
class Second extends React.Component { 
    // 定义为箭头函数，确保触发时this指向正确
    showText = () => {
        alert("Got it");
    }
    render () {
        return (
            <div>
                {/* 访问类内部方法需要加this */}
                <button onClick={this.showText}> Click Me  </button>
            </div>
        );
    }
}
export default Second;

可选的传统写法 #

如果不想用类属性箭头函数，也可以在构造函数中手动绑定this：

import React from 'react';
import reactDom from 'react-dom';
        
class Second extends React.Component { 
    constructor(props) {
        super(props);
        // 手动绑定this指向
        this.showText = this.showText.bind(this);
    }
    showText() {
        alert("Got it");
    }
    render () {
        return (
            <div>
                <button onClick={this.showText}> Click Me  </button>
            </div>
        );
    }
}
export default Second;

内容的提问来源于stack exchange，提问作者Ripper2