如何將索引從 javascript map function 傳遞到 onclick function？

Question

我有一個正在迭代的數據數組，在 javascript map() function 調用中，我使用了 map() 采用的第二個參數“索引”。 我如何將索引傳遞給 onClick 事件？ 我嘗試將索引添加到 onClick 的 arguments 列表中，但我只能訪問事件。 無論如何我可以通過索引嗎？

我希望能夠執行注釋掉的行“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>
    )
}

Answer 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>
    )
}

Answer 2

這邊走。 請 go 通過此博客了解更多關於通過 arguments 和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>
    )
}

Answer 3

1. 首先，您需要將index作為參數傳遞。 onClick={(e) => onClick(e, index)}

2. 然后接收該索引作為功能參數。

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

Answer 4

只需將它作為參數添加到 yow onClick

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

然后在您的 function 中也添加它

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

Answer 5

您可以在此處使用高階 function 來根據需要傳遞參數：

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>
    )
}