时间戳

首页 > 解决方案 > 将输入传递给事件处理程序的正确方法

javascript - 将输入传递给事件处理程序的正确方法

问题描述

我在我的代码中创建了一个 onClick 事件处理程序，并遇到了一个稍微令人困惑的事件。我正在测试 aconsole.log以查看传递给事件处理程序的内容，并发现虽然传递了一个名为的变量teamId，但console.log建议的类已传递给它。

我的原始代码如下：

    
    const renderedOptions = Object.keys(comps,).map((compName, index) =>{

        const teamId = comps[compName].id

        return(
            <div 
                key={teamId}
                className="item"
                onClick = {(teamId)=>console.log(teamId)}
            >
                {compName}
            </div>
        )
    })

console.log返回的Class {dispatchConfig: {…}, _targetInst: FiberNode, nativeEvent: MouseEvent, type: "click", target: div.item, …}.

onClick然后，我通过将箭头函数更改为 返回我最初预期 ()=>console.log(teamId)的常量值来调整代码。teamId

有人可以解释为什么(teamId)=>console.log(teamId)返回一个类对象，同时()=>console.log(teamId)返回 teamId 的实际值吗？

标签： javascriptreactjsonclickevent-handling

解决方案

因为事件处理程序是使用事件对象作为参数调用的。有类似的代码会更合乎逻辑(event) => {...}。

当然，您可以自己选择参数的名称。因此，在您的示例中(teamId) => {...}，您正在调用参数teamId（在具有相同名称的外部作用域中隐藏局部变量），但当然您仍然可以将事件对象传递给它，并且当您teamId在函数体内编写时，您实际上可以访问您在参数中获得的事件对象（因为它是具有该名称的“最接近”（范围）变量）。

使用() => {...}(or (anyOtherName) => {...}) 您不会与外部范围的teamId变量名发生冲突，因此在函数内部写入teamId会访问该变量。

推荐阅读