React イベントバインディングの詳細

React イベントバインディングの詳細
  • ReactイベントバインディングはネイティブDOMイベントバインディングに似ています
  • 構文: on+イベント名={イベント ハンドラー} 例: onClick={()=>{}}
  • 注意: Reactイベントはキャメルケースの命名規則を使用します

クラスコンポーネントイベントバインディング

'react' から React をインポートします。
'react-dom' から ReactDOM をインポートします。
クラスAppはReact.Componentを拡張します。
  ハンドルクリック() {
    コンソールログ(111);
  }
  与える() {
    戻ります (<button onClick={this.handleClick} > クリックしてください</button >)
  }
}
ReactDOM.render(<App />, document.getElementById('root'))

関数コンポーネントイベントバインディング

'react' から React をインポートします。
'react-dom' から ReactDOM をインポートします。
関数App() {
  関数handleClick() {
    コンソールログ(111);
  }
  // 関数コンポーネントには this がないので、 this を追加せずに関数名だけを記述します。
  戻る (<button onClick={handleClick}>クリックしてください</button>)
}
ReactDOM.render(<App />, document.getElementById('root'))

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Reactイベントバインディングの詳細な説明
  • Reactでのイベントバインディングの実装は3つの方法を指しています
  • Reactでこれをイベントにバインドする4つの方法の詳細な説明
  • React学習におけるイベントバインディングのいくつかの手法の比較

<<:  ウェブフロントエンド開発者が知っておくべき 9 つの実用的な CSS プロパティ

>>:  初心者向けMySQLシリーズチュートリアル

推薦する

Vue3 非同期データ読み込みコンポーネントサスペンスの使い方

目次序文コンポーネントの作成要約する序文Vue3 には多くの注目すべき機能が追加されましたが、サスペ...

CSS を使用してテクスチャ付きグラデーション背景画像を記述するためのサンプル コード

プロジェクト内のページの長さはおよそ2000px以上あり、背景画像にはテクスチャやグラデーションがあ...

HTML スペースコードの簡単な分析

HTML についてどれくらい知っていますか? 現在、基本的な HTML コードを学習している場合は、...

CSSスタイルは、テキストが長すぎる場合に省略記号を表示する問題を解決します

1. CSSスタイルは、テキストが長すぎる場合に省略記号を表示する問題を解決します1. 一般的なスタ...

MySQLの高可用性と高パフォーマンスのクラスタを構築する方法

目次MySQL NDB Clusterとはクラスター構築のための準備作業クラスターのデプロイを開始す...

MySQL における悲観的ロックと楽観的ロック

リレーショナル データベースでは、悲観的ロックと楽観的ロックがリソース同時実行シナリオのソリューショ...

Docker環境でJenkinsを設定すると、タスクをビルドするときにコンソールログに文字化けした中国語の文字が表示されます

目次1. 問題の説明: 2. Jenkins設定のトラブルシューティング3. コードログのエンコード...

jQueryはテーブル行データのスクロール効果を実現します

この記事の例では、テーブル行データのスクロール効果を実現するためのjQueryの具体的なコードを参考...

Gearman + MySQL による永続化操作例

この記事では、gearman+mysql メソッドを使用して永続化操作を実装します。ご参考までに、詳...

Bootstrap3.0 学習ノートテーブル関連

この記事では、Webサイトを作ったことがある人にとっては馴染みのあるテーブルについて主に説明します。...

HTMLページのネイティブVIDEOタグはダウンロードボタン機能を隠します

Web プロジェクトを作成しているときに、紹介ビデオが別にある紹介ページに遭遇しました。この短いビデ...

知らないかもしれないmysqldumpパラメータ

前回の記事で、mysqldump バックアップ ファイルに記録されるタイムスタンプ データは UTC...

MySql SQL最適化のヒントの共有

ある日、内部結合を含む SQL ステートメントの実行速度はそれほど遅くはない (0.1 ~ 0.2)...