本文介绍了React.js-在单击事件上查找映射元素的ID的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试查找当前元素的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)
}
这篇关于React.js-在单击事件上查找映射元素的ID的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!