React.jsのループでonclick関数にデータを渡すにはどうすればよいですか?
P粉523335026
2023-08-30 19:26:23
<p>まずはコードを入れていきます。 </p>
<pre class="brush:php;toolbar:false;">{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)
}</pre>
<p>基本的に、私が望むのは、onClick が有効になったときに、gameMode.title を onClick 関数に渡してコンソールに出力することです。ループ内でそのデータにアクセスできる方法で onClick を渡す方法がわかりません。 </p>
データを渡すには 2 番目の関数が必要です:
onClick={() => gameModeHandler(gameMode.title)}
。onClick イベントにはコールバック関数を使用する必要があります。それに応じて関数を調整します;
onClick イベント
リーリーonClick 関数
リーリーただし、単一のオブジェクトをループから呼び出される関数に渡したい場合は、gameMode オブジェクトをパラメータとして gameModeHandler 関数に渡すことができます。
onClick イベント リーリー
onClick 関数 リーリー
当然、オブジェクトからgameModeTitle; を抽出できます。 リーリー