TypeError：这是未定义的“反应”[重复]

Posted 2023-02-22

【中文标题】TypeError：这是未定义的“反应”[重复]

【英文标题】：TypeError: this is undefined "React" [duplicate]

【发布时间】：2020-07-13 05:10:33

【问题描述】：

出现类型错误，但是当我使用 onClick=()=>this.clickHandler() 时，它就像魅力一样。那么当我使用 onClick=()=>this.clickHandler() 时发生了什么，以及为什么我通过编写 onClick=this.clickHandler 得到错误p>

constructor(props)
        super(props)
    
    render() 
        return (
            <div>
                <button onClick=this.clickHandler>Class click</button>
                /* <button onClick=()=>this.clickHandler()>Class click</button> */
            </div>
        )
    

    clickHandler()
        this.logPrint()
    
    logPrint()
        console.log("click the button");

    

【问题讨论】：

反应中缺少绑定

这能回答你的问题吗？ Why and when do we need to bind functions and eventHandlers in React?

***.com/questions/33973648/…

【参考方案1】：

对事件处理程序使用箭头函数，它们会自动绑定 this：

clickHandler = () => 
    this.logPrint()

【参考方案2】：

实现这一目标的两种方法

使用箭头函数

clickHandler: () => 

在构造函数中与组件的this绑定方法

constructor(props)
    super(props);
    this.clickHandler = this.clickHandler.bind(this);