React.js中如何在循环中传递数据给onclick函数？

Question

首先，我会放入代码。

{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>
              </>
            );
          })}

onClick函数

const gameModeHandler = (e) => {
    console.log(e.target.value)
  }

基本上，我想要的是，当onClick生效时，将gameMode.title传递给onClick函数以将其打印到控制台。我不知道如何以一种可以在循环中访问该数据的方式将onClick传递。

Answer 1

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

Answer 2

您需要为您的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)