如何在 function React 中從 onClick 返回 ID

Question

我在 function 中有模板設置，我希望它在單擊時傳遞其 ID - 但不知何故，我現在設置它的方式是，它在元素加載時被單擊，之后我無法單擊它。

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

Console.log 會記錄正確的 ID，但會在加載元素時立即執行。

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

我如何讓它表現得像你期望的那樣？ 這樣當單擊具有類名“portItem”的div時，它會將其ID傳遞給handleClick？

Answer 1

你需要做：

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

這確保只有當我們單擊div時，才會調用處理程序 function 並將值傳遞給處理程序。

這是將值傳遞給處理程序的一般方法，我們基本上在Synthetic Event中使用 function （在您的情況下onClick ）

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

Answer 2

每次元素呈現時都會調用它。 您應該將其更改為：

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