Блог

У меня есть настройка шаблона в функции, и я хочу, чтобы он передавал свой идентификатор при нажатии, но каким-то образом, как я его настроил сейчас, он щелкается при загрузке элемента, и я не могу щелкнуть его после этого.

 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
 

Консоль.журнал регистрирует правильный идентификатор, но делает это сразу после загрузки элемента.

 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
 

Как мне заставить его вести себя так, как вы ожидаете? Чтобы при нажатии на div с именем класса «portItem» он передавал свой идентификатор в handleClick?

Вам нужно сделать:

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

Это гарантирует, что вызывается только тогда, когда мы нажимаем на div функцию обработчика, а также значение передается обработчику.

Это общий способ передачи значений обработчикам, где мы в основном используем функцию внутри Synthetic Event (в вашем случае onClick )

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

Вы вызываете его каждый раз, когда элемент отображается. Вы должны изменить его на:

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