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)