如何将JavaScript map函数的index参数传递给onClick事件函数

核心思路：在map遍历的匿名回调内，利用闭包将当前轮次的index/productObject主动传入点击处理函数即可，两种常用实现方式如下：

方式1：传入index参数 #

第一步：修改onClick函数定义，新增index入参 #

const onClick = (e, index) => {
    e.persist()
    console.log(e)
    handleImageClick(productObjects[index])
}

第二步：在绑定onClick时传入当前index #

{productObjects.map((productObject,index) => (
    <ImageWrapper key={index} src={productObject.image} onClick={(e) => onClick(e, index)}>
                    
    </ImageWrapper>
))}

方式2：直接传入当前productObject（更推荐，无需额外通过index取值） #

第一步：修改onClick函数定义，直接接收商品对象参数 #

const onClick = (e, product) => {
    e.persist()
    console.log(e)
    handleImageClick(product)
}

第二步：在绑定onClick时传入当前遍历到的productObject #

{productObjects.map((productObject,index) => (
    <ImageWrapper key={index} src={productObject.image} onClick={(e) => onClick(e, productObject)}>
                    
    </ImageWrapper>
))}

小提示：如果你的商品列表存在动态增删、排序的场景，建议不要用index作为ImageWrapper的key属性，换成商品唯一ID（比如productObject.id）可以避免渲染异常。

内容的提问来源于stack exchange，提问作者Ben