ITIS G. RIVOIRA - IIS Denina Pellico Rivoira

Uso dei target

Attraverso i target posso restituire il valore di un elemento (<div>) selezionato

Esempio di un possibile utilizzo

                        
import React, {useRef} from 'react'
import './App.css'

const App = () => {

	//FUNZIONE CLICCAMI (pressione del div)
	const cliccami =(event) => {
		//ALERT CON IL TESTO DEL <DIV> SELEZIONATO
		alert(event.target.textContent)
	}

	//FUNZIONE CLICCAMI 2 (pressione del div)
	const cliccami2 =(event) => {
		//ALERT CON IL NOME DELLA MOTO SELEZIONATA
		alert(event.target.dataset.nome)
	}

	//RETURN --> Stampa a video
	return (
		<div>
			{/* Event target */}
			<div onClick={cliccami}>
				<p>Ciao</p>
				<div>Buona sera</div>
				<p>Buon giorno</p>
			</div>

			{/* Current target */}
			<div class="pc" onClick={cliccami2} className="card-img">
				{/* alle immagini aggiungo un attributo personalizzato "data-nome" */}
				<img data-nome = "Beta" src="https://storage.edidomus.it/dueruote/nuovo/850/00050791.JPG" width="400vh" alt=""/>
				<img data-nome = "Derbi" src="https://storage.edidomus.it/dueruote/nuovo/850/LAT3899.jpg" width="350vh" alt=""/>
				<img data-nome = "Fantic" src="https://www.dueruote.it/content/dam/dueruote/it/foto/moto-scooter/2019/11/05/fantic-motor-enduro-e-motard-50-e-125/gallery/rbig/50%20M%20bk%20competition.jpg" width="300vh" alt=""/>
			</div>
		</div>
	)
}

export default App