Salesforce Lightning计算器组件报错求助：Component未定义

问题场景 #

开发的Lightning计算器组件用于实现基础加减乘计算，点击操作按钮时出现报错，无法正常执行计算逻辑。

报错信息 #

This page has an error. You might just need to refresh it.
Action failed: c:v5testing$controller$Addme [Component is not defined]
Failing descriptor: {c:v5testing$controller$Addme}

问题分析与修复点 #

代码中存在以下几处大小写、拼写类错误，导致功能异常：

• 控制器参数大小写错误：控制器方法的参数是component（小写），但代码中错误使用了大写的Component，JavaScript是大小写敏感语言，因此抛出Component is not defined错误。
• 变量大小写不一致：定义了大写的A、B变量，但计算时使用了小写的a、b，会导致变量未定义。
• 按钮事件属性拼写错误：Add按钮的onclick属性拼写为onclcik，少了一个字母i，导致点击事件无法触发正确的控制器方法。
• 控制台打印变量错误：console.log(c)中的c未定义，应该使用大写的C。

修复后的完整代码 #

CMP组件文件 #

<aura:component >
    
    <aura:attribute name="aval" type="Integer"/>
    <aura:attribute name="bval" type="Integer"/>
    <aura:attribute name="result" type="Integer"/>
    
    
    <lightning:card title="Calculator" iconName ="standard:lead">
        <aura:set attribute="actions">
            <lightning:buttonGroup>
                <lightning:button label="Add" onclick="{!c.Addme}"/>
                <lightning:button label="Subtract" onclick="{!c.Subme}" />
                <lightning:button label="multiply" onclick="{!c.Mulme}" />

            </lightning:buttonGroup>
        </aura:set> 
        
        
        <lightning:input label="enter the first NO" value="{!v.aval}"/>
        <lightning:input label="enter the second NO" value="{!v.bval}"/>
        <lightning:input label="result" value="{!v.result}"/>
        
   </lightning:card>
</aura:component>

控制器JS文件 #

({
    Addme : function(component) 
    {
        var A=component.get("v.aval");
        var B=component.get("v.bval");
        var C=A+B;
        console.log(C);
        component.set("v.result",C);
    },
    Subme : function(component) 
    {
        var A=component.get("v.aval");
        var B=component.get("v.bval");
        var C=A-B;
        component.set("v.result",C);
    },
     Mulme : function(component) 
    {
        var A=component.get("v.aval");
        var B=component.get("v.bval");
        var C=A*B;
        component.set("v.result",C);
    }
   
})

应用文件 #

<aura:application extends="force:slds" >
    <c:v5testing/>
</aura:application>

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