Comment transmettre des données à la fonction onclick en boucle dans React.js ?
P粉523335026
2023-08-30 19:26:23
<p>Tout d’abord, je vais mettre le code. </p>
<pre class="brush:php;toolbar:false;">{gameModes.map((gameMode, key) => {
retour (
≪>
<div className={styles.gameMode} key={key} onClick={gameModeHandler}>
<div className={styles.gameModeContent}>
<img src={gameMode.gameModeArtwork} alt="" />
<p className={styles.modeTitle}>{gameMode.gameModeTitle}</p>
<p className={styles.modeDesc}>
{gameMode.gameModeDesc}
</p>
</div>
</div>
≪/>
);
})}</pré>
<p><strong>fonction onClick</strong></p>
<pre class="brush:php;toolbar:false;">const gameModeHandler = (e) =>
console.log(e.target.value)
}</pré>
<p>En gros, ce que je veux, c'est que lorsque onClick prend effet, transmettre le gameMode.title à la fonction onClick pour l'imprimer sur la console. Je ne sais pas comment transmettre onClick de manière à pouvoir accéder à ces données en boucle. </p>
Vous avez besoin d'une deuxième fonction pour transmettre les données :
onClick={() => gameModeHandler(gameMode.title)}
.Vous devez utiliser la fonction de rappel pour votre événement onClick. Et ajustez votre fonction en conséquence ;
événement onClick
Fonction onClick
Cependant, si vous souhaitez passer un seul objet de la boucle à la fonction appelée, vous pouvez passer l'objet gameMode en paramètre à la fonction gameModeHandler ;
événement onClick
Fonction onClick
Vous pouvez évidemment ensuite extraire legameModeTitle; de l'objet