React.js中如何在循环中传递数据给onclick函数?
P粉523335026
P粉523335026 2023-08-30 19:26:23
0
2
523
<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>
P粉523335026
P粉523335026

全部回复(2)
P粉320361201

你需要一个第二个函数来传递数据:onClick={() => gameModeHandler(gameMode.title)}

P粉959676410

您需要为您的onClick事件使用回调函数。并相应调整您的函数;

onClick事件

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

onClick函数

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

然而,如果您希望将循环中的单个对象传递给调用的函数,您可以将gameMode对象作为参数传递给gameModeHandler函数;

onClick事件

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

onClick函数

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

显然,您随后可以从对象中提取gameModeTitle;

console.log(gameMode.gameModeTitle)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板