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

Question

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

我原来的代码如下：

    
    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) returns 一个 class 对象，而 ()=>console.log(teamId) returns teamId 的实际值吗？

Answer 1

因为事件处理程序是用事件对象作为参数调用的。使用 (event) => {...}.

这样的代码会更合乎逻辑

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

使用 () => {...}（或 (anyOtherName) => {...}），您不会与外部作用域的 teamId 变量名称发生冲突，因此在您的函数中写入 teamId 会访问该变量.

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

Correct way to pass inputs into event handlers

javascript

onclick

event-handling

reactjs