Wie übergebe ich Daten in einer Schleife in React.js an die Onclick-Funktion?

Question

Zuerst gebe ich den Code ein.

{gameModes.map((gameMode, key) => {
            zurückkehren (
              <>
                <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-Funktion

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

Im Grunde möchte ich, wenn onClick wirksam wird, den gameMode.title an die onClick-Funktion übergeben, um ihn auf der Konsole auszugeben. Ich weiß nicht, wie ich onClick so weitergeben soll, dass ich in einer Schleife auf diese Daten zugreifen kann.

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)