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

推薦する

Webフロントエンド開発CSS関連チームコラボレーション

フロントエンド開発部門は成長し、スタッフも増加し、技術も向上しています。 CSSer はフロントエン...

CSS仕様 BEM CSSとOOCSSサンプルコード詳細説明

序文プロジェクト開発中、各人のコーディング習慣が異なるため、記述された CSS コードは十分に構造化...

Vueは単一ファイルコンポーネントの完全なプロセス記録を実装します

目次序文単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...

MySQL データ操作 - DML ステートメントの使用

例示するDML(データ操作言語)とは、データベースの追加、削除、変更を行うための操作命令のことです。...

ウェブデザイナーが持つべき7つのスキル

Web デザインは科学であると同時に芸術でもあります。 Web デザイン作業は、半分は適切なプログラ...

JSは文字列内の指定された文字列のn番目の出現位置を取得します

文字の位置を取得するための同様の方法について学習します。 charAt() 文字列内の指定された位置...

VMware vSphere 6.7 (ESXI 6.7) のグラフィック インストール手順

環境: VMware VCSA 6.7 (VMware-VCSA-all-6.7.0-8169922...

Vueでスワイパープラグインを使用する際の問題を解決する

デモを作成するときにこのプラグインを使用していくつか問題が発生したため、プラグインの使用方法といくつ...

IDEAでVUEプロジェクトをデバッグするための詳細な手順

js コードをデバッグするには、コード内にデバッガーを記述するか、Chrome で毎回ブレークポイン...

Nginxにモジュールを動的に追加する方法

前面に書かれた多くの場合、現在のプロジェクトの状況とビジネスニーズに基づいて Nginx をインスト...

JavaScript はクリックして画像の形状を変更する (変換アプリケーション) を実装します。

JavaScriptをクリックすると画像の形状が変わります(変形の応用)。参考までに具体的な内容は...

vue3 watch と watchEffect の使い方と違い

1.リスナーを見る時計のご紹介 'vue' から { ref, reactive, ...

フォームを送信した後、別のファイルに移動する

<br />質問:特定のファイルにジャンプするには、HTML でどのように記述すればよい...

uniappは録音アップロード機能を実現

目次uni-app の紹介HTML部分js部分インスタンスを作成する録音を開始録音終了録音を再生再生...

Linuxファイルの基本属性の知識ポイントのまとめ

Linux システムは典型的なマルチユーザー システムです。異なるユーザーは異なる立場にあり、異なる...