React.js-在单击事件上查找映射元素的ID

2022-02-26 00:00:00 arrays reactjs mapping javascript

我正在尝试查找当前元素的id,以便在执行onClick操作时,我只能操作我单击的映射元素。

测试单击

const testClick = (event) => {
    console.log(event.person.id)
}

数据:

{
  "ExampleData": [
    {
      "id": 0,
      "name": "Joe Doe",
      "email": "joedoe@gmail.com"
    },
    {
      "id": 1,
      "name": "John Smith",
      "email": "johnsmith@example.com"
    },
]

}

映射:

const data = exampleData.ExampleData

 {(data|| {}).map((person, i) => {
                return (
                    <DataContainer testClick={testClick} person={person}/>
                )
            })}

这映射DataContainer子对象的次数与对象数组中的项一样多。

但现在,我正尝试使用onclick来检测我按下的特定映射项。如您所见,我将testClick函数传递给DataContainer,并在其中尝试控制台记录我按下的用户的当前ID。

const testClick = (e) => {
    console.log(e.id)
}

例如:

onClick - if ID === currentID --- do something 

解决方案

添加一个箭头函数作为Click事件的处理程序,并将id作为参数传递:

 testClick={()=>testClick(person.id)}

如果您还需要该事件,可以执行以下操作:

 testClick={(event)=>testClick(event,person.id)}

 const testClick = (event,id) => {
   console.log(event, id)
}

相关文章