React.jsのループでonclick関数にデータを渡すにはどうすればよいですか?
P粉523335026
P粉523335026 2023-08-30 19:26:23
0
2
504
<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>
P粉523335026
P粉523335026

全員に返信(2)
P粉320361201

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

いいねを押す +0
P粉959676410

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

onClick イベント

リーリー

onClick 関数

リーリー

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

onClick イベント リーリー

onClick 関数 リーリー

当然、オブジェクトから

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

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!