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

推薦する

nginxフォワードプロキシとリバースプロキシの詳細な説明

目次フォワードプロキシnginx リバースプロキシnginx リバースプロキシ 02リバースプロキシ...

Oracle の MySQL バージョンでユーザー Scott のテーブル ステートメントを作成する例

概要: Oracle scottユーザーには4つのテーブルがあり、実験やデータ検証に便利です。現在は...

写真のプレビューとアップロード機能を実現するhtml+css+js

はじめに: Web ページを作成するときに、画像をアップロードする必要がある場合がよくあります。画像...

Ubuntu Server のターミナルのウェルカム メッセージで広告を無効にする方法

最新の Ubuntu Server バージョンを使用している場合、ようこそメッセージに、Ubuntu...

Vueでミックスインを使用する方法

目次序文使い方要約する序文Vue にはコードの再利用に使われる mixins という設定項目がありま...

単一の MySQL テーブル内の行数が 500 万を超えてはいけないのはなぜですか?

今日は、興味深いトピックについてお話ししましょう。データベースとテーブルを分割することを検討する前に...

jQueryはすべての選択と逆選択操作ケースを実装します

この記事では、全選択と逆選択操作を実装するためのjQueryの具体的なコードを参考までに共有します。...

js の Array.forEach でループを終了する方法の例

目次forEach() メソッドjs の Array.forEach のループから抜け出す方法解決:...

CentOS6.5 でファイル共有サービス Samba を構築するチュートリアル

Samba サービス:このコンテンツはサンバサービス学習者の参考用ですケースの説明:企業の管理者は、...

CentOS7 で docker を使用して Apollo 構成センターをデプロイする実装

Apollo オープンソース アドレス: https://github.com/ctripcorp/...

Elasticsearchツールcerebroのインストールと使用チュートリアル

Cerebro は、Elasticsearch バージョン 5.x より前の Elasticsear...

Vueのライブ放送機能の詳しい説明

最近、会社でたまたま生放送をしていたのですが、今日は私が遭遇した落とし穴を記録します。会社のサーバー...

MySQLトリガーの使用

トリガーにより、ステートメントの実行前または実行後に他の SQL コードを実行できます。トリガーは、...

MySqlデータベースの基礎知識のまとめ

目次基本的なデータベース操作2) データベースを表示する3) データベースを選択する4) データベー...