Bagaimana untuk menghantar data ke fungsi onclick dalam gelung dalam React.js?

Question

Mula-mula, saya akan masukkan kod.

{gameModes.map((gameMode, key) => {
            kembali (
              <>
                <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>
              </>
            );
          })}</pra>
<p><strong>pada fungsi Klik</strong></p>
<pre class="brush:php;toolbar:false;">const gameModeHandler = (e) =>
    console.log(e.target.value)
  }

Pada asasnya, apa yang saya mahukan ialah, apabila onClick berkuat kuasa, hantar gameMode.title kepada fungsi onClick untuk mencetaknya ke konsol. Saya tidak tahu bagaimana untuk meneruskan onClick dengan cara yang saya boleh mengakses data itu dalam satu gelung.

Answer 1

Anda memerlukan fungsi kedua untuk menghantar data: onClick={() => gameModeHandler(gameMode.title)}.

Answer 2

Anda perlu menggunakan fungsi panggil balik untuk acara onClick anda. Dan laraskan fungsi anda dengan sewajarnya;

acara onClick

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

fungsi onClick

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

Walau bagaimanapun, jika anda ingin menghantar satu objek dari gelung ke fungsi yang dipanggil, anda boleh menghantar objek gameMode sebagai parameter kepada fungsi gameModeHandler;

acara onClick

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

fungsi onClick

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

Sudah tentu anda boleh mengekstrak

gameModeTitle; daripada objek

console.log(gameMode.gameModeTitle)