反应功能组件 OnClick 事件 Scope 错误

Question

While creating an array of table data, I'm trying to pass the current ID of an image into a function using an onClick event. What am I doing wrong here? I had the impression a simple solution such as this.id or an event handler would function correctly. Any ideas? Thank you!

        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

You're passing in the onClick event into the function, when all you need to pass is the value of j . However, we want to pass the value of j at the point in the loop, so we need to make a copy of j before passing it in.

So right after j++; , we need to create a new copy let j_copy = j;

Then your onClick function should be:

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

and your deleteRecord function:

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

This hard-codes the value of j each time the loop runs. Note that each time the loop runs, a new HTML fragment with a different onClick handler gets generated with that hard-coded value. So the first time, it's equal to onClick={()=>deleteRecord(1)} , the second time it's onClick={()=>deleteRecord(2)} , and so on.