如何将索引从 javascript map 函数传递到 onclick 函数？答案

【问题标题】：How can I pass the index from javascript map function to the onclick function?如何将索引从 javascript map 函数传递到 onclick 函数？
【发布时间】：2021-08-23 13:11:06
【问题描述】：

我有一个要遍历的数据数组，在 javascript map() 函数调用中，我使用 map() 采用的第二个参数“索引”。如何将索引传递给 onClick 事件？我尝试将索引添加到 onClick 的参数列表中，但我只能访问事件。无论如何我可以通过索引吗？

我希望能够执行注释掉的行“handleImageClick(productObjects[index])”。我需要让父组件知道用户点击了哪个productObject。

export default function SideProducts(props) {
    
const { productObjects, handleImageClick } = props;


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

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

我这样做没有测试，但你应该能够像这样通过索引。

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

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

【讨论】：

【解决方案2】：

首先您需要将index 作为参数传递。 onClick={(e) => onClick(e, index)}
然后接收该索引作为功能参数。

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

【讨论】：

【解决方案3】：

这边。请浏览此博客以了解有关使用 onClick 传递参数的更多信息

export default function SideProducts(props) {
    
const { productObjects, handleImageClick } = props;


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

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

【讨论】：

【解决方案4】：

只需将其作为参数添加到 yow onClick

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

然后在你的函数中也添加它

const onClick = (e,prop)=> ….code

【讨论】：

【解决方案5】：

你可以在这里使用高阶函数来传递你想要的参数：

const handleWithIndex= index => {
    return (event) => {
         e.persist()
         //handleImageClick(productObjects[index])
    }
}

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

【讨论】：