Question

在创建表数据数组时，我尝试使用 onClick 事件将图像的当前 ID 传递到函数中。我在这里做错了什么？我的印象是一个简单的解决方案，如 this.id 或事件处理程序可以正常运行。有任何想法吗？谢谢！

        function deleteRecord(event)
        {
               alert(event.target.id);       
        }

        let j = 0; 
        for(let i in dataRes)
        {
            j++;
            arr.push
            (
                    <tr>
                        <td><div><img id={j} src={"RANDOM IMAGE"} onClick={(event)=>deleteRecord(event)} /><span id={"item"+j}>{DATA}</span></div></td>
                        <td>{DATA}</td>
                        <td>{DATA}</td>
                    </tr>
            );
        }

Answer 1

您将 onClick 事件传递到函数中，此时您只需要传递 j 的值。但是，我们希望在循环中的点处传递 j 的值，因此我们需要在传入之前制作 j 的副本。

所以在 j++; 之后，我们需要创建一个新副本 let j_copy = j;

那么你的 onClick 函数应该是：

onClick={()=>deleteRecord(j_copy)}

和您的 deleteRecord 函数：

function deleteRecord(index)
{
      alert(index);    // alerts the value of j_copy 
}

这会在每次循环运行时硬编码 j 的值。请注意，每次循环运行时，都会使用该硬编码值生成具有不同 onClick 处理程序的新 HTML 片段。所以第一次等于 onClick={()=>deleteRecord(1)}，第二次等于 onClick={()=>deleteRecord(2)}，依此类推。

反应功能组件 OnClick 事件范围错误

1 个答案: