ReactJS - Child 的 onClick 事件调用父方法，但范围不是我所期望的

Posted 2023-03-16

【中文标题】ReactJS - Child 的 onClick 事件调用父方法，但范围不是我所期望的

【英文标题】：ReactJS - Child's onClick event calls parent method but the scope is not what I expected

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

【问题描述】：

我有一个父子类。父类有一个 store 和一个方法，需要在单击 child 时调用。父方法修改存储。不幸的是，当我从孩子的 onClick（使用道具）调用父母的方法时，this 对象不可用。我认为这是一个范围问题，但我不知道这是 JS 级别的问题还是对 React 范围的误解（我是框架的新手）。

组件定义如下，当我点击按钮跨度时，我从 toggleAlarmState 中得到以下错误：

Uncaught TypeError: Cannot read property 'setState' of undefined

父组件

import Button from "../components/buttons/Button"

export default class TestStatus extends Component 

    state = 
        alarmIsOn: false,
    ;

    toggleAlarmState(event) 
        this.setState(
                alarmIsOn: !this.state.alarmIsOn
            
        )
    

    render() 
        return (
            <Button
                className="alarm-toggle-btn"
                text=`Alarm is $this.state.alarmIsOn ? 'On' : 'Off'`
                onClick=this.toggleAlarmState
            />
        );
    
 

子组件

import React, Component from "react";

export default class Btn extends Component 

    render() 
        return (
            <span onClick=this.props.onClick>this.props.text</span>
        )
    

为什么this未定义，当我单击按钮组件时修改商店的最佳做法是什么？

【问题讨论】：

请为此使用codesandbox.io 创建一个small demo 以显示正在发生的问题。

你需要绑定thisreactjs.org/docs/handling-events.html

【参考方案1】：

我认为如果您将toggleAlarmState 转换为箭头函数，它将起作用！或者如果您坚持使用相同的功能，则必须在构造函数中将toggleAlarmState 与this 绑定。

toggleAlarmState = event => 
        this.setState(
                alarmIsOn: !this.state.alarmIsOn
            
        )
    

如果您不使用箭头函数，这是另一种绑定解决方案。

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

    state = 
    alarmIsOn: false,
;

toggleAlarmState(event) 
    this.setState(
            alarmIsOn: !this.state.alarmIsOn
        
    )

【讨论】：

箭头功能就像一个魅力。你能解释一下为什么吗？如果我猜测是因为我现在将函数分配给变量吗？这是否比仅仅定义一个函数更能巩固范围？

在经典函数表达式中，this 关键字根据调用它的上下文绑定到不同的值。然而，对于箭头函数，这是词法绑定的。这意味着它使用包含箭头函数的代码中的 this。是的，它确实巩固了范围，而不仅仅是将其定义为一个简单的函数。但是，在某些情况下您不想使用箭头函数。查看此post，了解何时不建议使用this。