如何在 function React 中从 onClick 返回 ID

Question

I have template setup in a function, and i want it to pass its ID when it's clicked - but somehow the way i have set it up now, it gets clicked as the element is loaded, and i am unable to click it afterwards.

import React from 'react'

function PortItem(props){
    return(
        <div className="portItem" onClick={props.click(props.pitem.id)}>
            <img src={props.pitem.src} alt={props.pitem.title}></img>
        </div>
    )
}

export default PortItem

The Console.log logs the correct ID, but does it immediately as the element is loaded.

import React from 'react'
import portData from "./portData"
import PortItem from "./portItem"

function PortfolioPage() {
    const handleClick = (id) => {
        console.log(id)
    }

    const portItems = portData.map(item => <PortItem key={item.id} pitem={item} click={handleClick}/>)

    return (
        <div>
            {portItems} 
        </div>
    )
}

export default PortfolioPage

How do i make it behave as you would expect it to? So that when the div with the className "portItem" is clicked, it passes its ID to the handleClick?

Answer 1

You need to do:

<div className="portItem" onClick={()=>props.click(props.pitem.id)}>

This makes sure that only when we click on the div the handler function is invoked and also the value is passed to the handler.

This is a general way to pass the values to handlers, where we basically use a function within a Synthetic Event (in your case onClick )

onEvent={()=>{handlerFunction(value)}}

Answer 2

You are calling it every time the element renders. You should change it to:

<div className="portItem" onClick={() => props.click(props.pitem.id)}>