著者は、 Creative Commons を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

Web開発では、eventsはWebブラウザーで発生するアクションを表します。 イベントハンドラーを使用してイベントに応答することにより、マウスでのクリック、Webページのスクロール、タッチスクリーンのタッチなど、あらゆるユーザーアクションに応答する動的なJavaScriptアプリケーションを作成できます。もっと。

React アプリでは、イベントハンドラーを使用して、状態データを更新したり、 prop の変更をトリガーしたり、デフォルトのブラウザーアクションを防止したりできます。 これを行うために、Reactはネイティブのイベントインターフェースの代わりにSyntheticEventラッパーを使用します。 SyntheticEventは、標準のブラウザーイベントを厳密にエミュレートしますが、さまざまなWebブラウザーに対してより一貫した動作を提供します。 Reactは、コンポーネントが Document Object Model(DOM)にマウントおよびアンマウントするときに、 Window イベントリスナーを安全に追加および削除するツールも提供し、Windowを制御できるようにします。 ]不適切に削除されたリスナーからのメモリリークを防止しながらのイベント。

このチュートリアルでは、Reactでイベントを処理する方法を学習します。 自己検証型の入力コンポーネントや入力フォームの有益なツールチップなど、ユーザーイベントを処理するいくつかのサンプルコンポーネントを作成します。 チュートリアル全体を通して、コンポーネントにイベントハンドラーを追加する方法、SyntheticEventから情報を取得する方法、およびWindowイベントリスナーを追加および削除する方法を学習します。 このチュートリアルを終了すると、さまざまなイベントハンドラーを操作して、Reactでサポートされているイベントのカタログを適用できるようになります。

前提条件

  • Node.jsを実行する開発環境が必要になります。 このチュートリアルは、Node.jsバージョン10.22.0およびnpmバージョン6.14.6でテストされました。 これをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはPPAを使用したインストール]セクションの手順に従います。 Ubuntu18.04