React.js中如何在循环中传递数据给onclick函数?
P粉523335026
2023-08-30 19:26:23
<p>首先,我会放入代码。</p>
<pre class="brush:php;toolbar:false;">{gameModes.map((gameMode, key) => {
return (
<>
<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>
</>
);
})}</pre>
<p><strong>onClick函数</strong></p>
<pre class="brush:php;toolbar:false;">const gameModeHandler = (e) => {
console.log(e.target.value)
}</pre>
<p>基本上,我想要的是,当onClick生效时,将gameMode.title传递给onClick函数以将其打印到控制台。我不知道如何以一种可以在循环中访问该数据的方式将onClick传递。</p>
你需要一个第二个函数来传递数据:
onClick={() => gameModeHandler(gameMode.title)}
。您需要为您的onClick事件使用回调函数。并相应调整您的函数;
onClick事件
onClick函数
然而,如果您希望将循环中的单个对象传递给调用的函数,您可以将gameMode对象作为参数传递给gameModeHandler函数;
onClick事件
onClick函数
显然,您随后可以从对象中提取gameModeTitle;