React.jsのループでonclick関数にデータを渡すにはどうすればよいですか?

Question

まずはコードを入れていきます。

{gameModes.map((gameMode, key) => {
            戻る （
              <>
                <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>
              </>
            );
          })}
<p><strong>onClick 関数</strong></p>
<pre class="brush:php;toolbar:false;">const gameModeHandler = (e) => {
    console.log(e.target.value)
  }

基本的に、私が望むのは、onClick が有効になったときに、gameMode.title を onClick 関数に渡してコンソールに出力することです。ループ内でそのデータにアクセスできる方法で onClick を渡す方法がわかりません。

Answer 1

データを渡すには 2 番目の関数が必要です: onClick={() => gameModeHandler(gameMode.title)}。

Answer 2

onClick イベントにはコールバック関数を使用する必要があります。それに応じて関数を調整します;

onClick イベント

リーリー

onClick 関数

リーリー

ただし、単一のオブジェクトをループから呼び出される関数に渡したい場合は、gameMode オブジェクトをパラメータとして gameModeHandler 関数に渡すことができます。

onClick イベント リーリー

onClick 関数 リーリー

当然、オブジェクトから

gameModeTitle; を抽出できます。 リーリー