將輸入傳遞給事件處理程序的正確方法

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箭頭 function 更改為()=>console.log(teamId)來調整代碼，它返回了我最初預期的常量teamId的值。

有人可以解釋為什么(teamId)=>console.log(teamId)返回 class object，而()=>console.log(teamId)返回 teamId 的實際值嗎？

Answer 1

因為事件處理程序是使用事件 object 作為參數調用的。 擁有像(event) => {...}這樣的代碼會更合乎邏輯。

當然，您可以自己選擇參數的名稱。 因此，在您的示例中(teamId) => {...}您正在調用參數teamId （在具有相同名稱的外部 scope 中隱藏局部變量），當然您仍然會收到事件 object 傳遞給它，並且當您在 function 正文中寫入teamId時，您實際上訪問了您在參數中獲得的事件 object （因為它是具有該名稱的“最接近”（范圍）變量）。

使用() => {...} （或(anyOtherName) => {...} ），您不會與外部范圍的teamId變量名稱發生沖突，因此在 function 中寫入teamId會改為訪問該變量。