Comment transmettre des données à la fonction onclick en boucle dans React.js ?
P粉523335026
P粉523335026 2023-08-30 19:26:23
0
2
522
<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>
P粉523335026
P粉523335026

répondre à tous(2)
P粉320361201

Vous avez besoin d'une deuxième fonction pour transmettre les données : onClick={() => gameModeHandler(gameMode.title)}.

P粉959676410

Vous devez utiliser la fonction de rappel pour votre événement onClick. Et ajustez votre fonction en conséquence ;

événement onClick

onClick={()=>gameModeHandler(gameMode.gameModeTitle)}

Fonction onClick

const gameModeHandler = (gameModeTitle) => {
    console.log(gameModeTitle)
  }

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

onClick={()=>gameModeHandler(gameMode)}

Fonction onClick

const gameModeHandler = (gameMode) => {
    console.log(gameMode)
  }
Vous pouvez évidemment ensuite extraire le

gameModeTitle; de l'objet

console.log(gameMode.gameModeTitle)
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal