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

推薦する

バックエンド管理システムを構築するためのvue-element-adminの実装手順

最近、カンファレンスの健康申告システムに取り組んでいたとき、バックエンドを構築する必要があり、vue...

MySQL インデックスの左端原則のサンプルコード

序文最近、MySQL のインデックスについて読んでいました。結合されたインデックスを見ると、左端の原...

Linux で crontab を使用してスケジュールされたタスクを追加する方法

序文Linux システムはシステム サービス crond によって制御されます。 Linux システ...

近々ブラウザに導入される CSS :is() と :where() の簡単な分析

Safari (Technology Preview 106) および Firefox (バージョン...

mysql 5.7.18 winx64 無料インストール設定方法

1. ダウンロード2. 減圧3. パス環境変数を追加し、mysqlが配置されているbinディレクトリ...

Linux でソースインストールされたパッケージを簡単に削除する方法

ステップ1: Stowをインストールするこの例では CentOS を使用しているため、拡張 EPEL...

Ubuntu 20.04 では、隠し録音ノイズ低減機能が有効になります (推奨)

最近、 Ubuntu 20.04でkazamを使用して録音しているときに、問題が見つかりました。シス...

Idea は、Web プロジェクトを開始するように Tomcat を設定します。グラフィック チュートリアル

tomcatの設定1. 実行構成をクリック 2. tomcat localを選択 3. tomcat...

vue-qr を使用して Vue の QR コードを生成する方法について深く理解する

目次npm ダウンロードステップ(1)輸入(2)vue-qrパラメータ例要約する「QRコード」の英語...

Alpine Dockerイメージフォント問題解決操作

1. フォントを実行し、フォント フォルダーを開いて、使用するフォント ファイルを見つけます。 2....

Kubernetes コントローラーとラベルの簡単な分析

目次01 k8sの一般的なコントローラーRCコントローラーデプロイメント コントローラーステートフル...

MySQL 8.0 アトミック DDL 構文の詳細な説明

目次01 アトミックDDLの紹介02 一部のDDL操作の実行動作の変更03 DDL 操作のログを表示...

JS を使って CSS3 で丸い角を実装する方法

IE で CSS3 を使用して角を丸くする方法を探していたときに、例を見つけました。まだテストして...

複数の古いプレーヤーの埋め込みコード

ウェブページに表示されるプレーヤーは、WMP/RealPlayer/Flash Player に過ぎ...

Vue 監視属性のグラフィック例の詳細な説明

目次リスナープロパティとは何ですか?リスニングプロパティと計算プロパティの違いは何ですか?監視プロパ...