我有一个无序的图像列表，我想知道哪个图像被点击(反应)

Question

我有一个无序的图像列表，我想知道哪个图像被点击了

有没有办法做到没有jquery?

<div
{this.props.icons.map((icon) => {
return (
<ul>
<li>
<img src={icon.url} alt=""></img>
<p>{icon.name}</p>
</li>
</ul>
)
})}
</div>

这个icons数组是一个对象数组

icons: [{
id: 0,
name: 'no-icon',
url: 'https://img.icons8.com/color/48/000000/door-hanger.png'
},
{
id: 1,
name: 'bungee',
url: 'https://img.icons8.com/color/48/000000/bungee-jumping.png'
},
…..

我尝试了一些方法，但我删除了它们，因为它们都有效

Thanks in advance

拉斐尔

Answer 1

您已经有了icon.id，只剩下添加onClick事件:

<ul>
{this.props.icons.map((icon) => {
return (
<li key={icon.id} onClick={() => console.log(icon.id)}>
<img src={icon.url} alt=""></img>
<p>{icon.name}</p>
</li>
);
})}
</ul