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シリーズチュートリアル

推薦する

Facebook 出会い系サイトデザインのユーザー エクスペリエンス分析

<br />関連記事: Facebookの情報アーキテクチャの分析 元記事: http:...

MySQL 学習ノート: 完全な SELECT ステートメントの使用例と詳細な説明

この記事では、MySQL 学習ノートの select ステートメントの完全な使用方法を例を使用して説...

vue-video-player でのブレークポイント再開の実装

最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。こ...

MySQLでデータベースデータ保存ディレクトリを変更する方法

序文MySQL データベースのデフォルトのデータベース ファイルは /var/lib/mysql に...

VMWare で Ubuntu を再起動した後、インターネットにアクセスできなくなる問題の解決方法

VMWareでUbuntuを再起動した後、インターネットにアクセスできなくなる問題を解決するには、次...

リクエストを転送したり、静的リソースファイルにアクセスしたりする複数の場所への nginx の実装

この記事では主に、リクエストを転送したり、静的リソース ファイルにアクセスしたりする nginx の...

JavaScriptオフセットは、ウィンドウ内でのマウス座標の取得とモジュールのドラッグを実装します。

オフセットOffset はオフセットです。関連プロパティの offset シリーズを使用すると、次の...

nginx をベースにした Web クラスター プロジェクトをすばやく構築する方法を説明します。

目次1. プロジェクト環境2. プロジェクトの説明3. プロジェクトの手順1. インストール2. 構...

Linuxプロセスネットワークトラフィック統計の実装プロセス

序文Linux には、ネットワーク接続、プロセス、およびその他の情報をリアルタイムで収集するための対...

MySQL レプリケーション テーブルの詳細とサンプル コード

MySQL レプリケーション テーブルの詳細な説明テーブル構造、インデックス、デフォルト値などを含む...

MySQLとSpringの自動コミットの詳細な説明

1 MySQLの自動コミット設定MySQL はデフォルトで自動的にコミットします。つまり、各 DML...

Vue はチャット ボックスで絵文字を送信する機能を実装します

vueチャットボックスで絵文字を送信し、vueインターフェースで絵文字を送信するための具体的なコード...

実用的なクイックスタートReactルーティング開発

インストールインストールするには、次のコマンドを入力します。 // ネプ npm で react-r...

Vueのライフサイクルについて詳しく説明します

目次序文1. Vue2 のライフサイクルインスタンスのライフサイクルその他のライフサイクルフック2....

TomcatはLog4jを使用してcatalina.outログを出力します。

Tomcat のデフォルトのログは java.util.logging を使用しますが、これにはい...