イベントの作成とディスパッチ

コンポーネントの JavaScript クラスでイベントを作成してディスパッチします。イベントを作成するには、CustomEvent() コンストラクタを使用します。イベントをディスパッチするには、EventTarget.dispatchEvent() メソッドをコールします。

CustomEvent() コンストラクタでは、イベント種別を示す文字列のみが必須のパラメータとなります。コンポーネントの作成者は、イベントを作成するときにイベント種別を指定します。イベント種別としては任意の文字列を使用できます。ただし、DOM イベントの標準に準拠することをお勧めします。

  • すべて小文字
  • スペースなし
  • 単語と単語の区切りはアンダースコア

インラインイベントハンドラ名の先頭は on でなければならないため、イベント名の先頭には on を付けないでください。イベント名が onmessage の場合、マークアップは <c-my-component ononmessage={handleMessage}> になります。onon と言葉が重複しているため、混乱の原因となります。

カスタムイベントによるコンポーネント間通信

では、コードを確認しましょう。

c-paginator コンポーネントには、[前へ] ボタンと [次へ] ボタンがあります。ユーザがこれらのボタンをクリックすると、コンポーネントはそれぞれ previous イベントと next イベントを作成してディスパッチします。paginator コンポーネントは、[前へ] ボタンと [次へ] ボタンが必要な任意のコンポーネントにドロップできます。その親コンポーネントはイベントをリスンして処理します。

ユーザがボタンをクリックすると、previousHandler または nextHandler 関数が実行されます。これらの関数は previous イベントと next イベントを作成してディスパッチします。

これらは単に「何かが起きた」ことだけを通知するイベントです。DOM ツリーで上方向にデータペイロードを渡すことはせず、単にユーザがボタンをクリックしたことのみを通知します。

previous イベントと next イベントをリスンして処理する c-event-simple というコンポーネントに paginator をドロップしてみましょう。

イベントをリスンするには、oneventtype という構文で HTML 属性を使用します。イベント種別は previousnext であるため、リスナーは onpreviousonnext になります。

c-event-simpleprevious イベントまたは next イベントを受け取ると、previousHandler 関数または nextHandler 関数が実行されて、ページ番号が 1 つ減り/増えます。

受信側のコンポーネントまでデータを渡すには、CustomEvent コンストラクタで detail プロパティを設定します。受信側のコンポーネントは、イベントリスナーのハンドラ関数で detail プロパティのデータにアクセスします。

CustomEvent インターフェースには、detail プロパティの型や構造の要件はありません。ただし、プリミティブ型のデータのみを送信することが重要です。JavaScript は、プリミティブ型以外のすべてのデータ型を参照によって渡します。コンポーネントの detail プロパティにオブジェクトが含まれていると、どのリスナーであってもコンポーネントについての知識なしでそのオブジェクトを変更できてしまいます。これは重大な問題です。プリミティブのみを送信するか、またはデータを detail プロパティに追加する前に新しいオブジェクトにコピーすることがベストプラクティスです。新しいオブジェクトにデータをコピーすることで、必要なデータのみが送信されること、そして受信側でデータを変更できなくなることを保証できます。

lwc-recipes リポジトリの c-event-with-data コンポーネントを見てみましょう。

選択された取引先責任者の名前、役職、電話番号、メールアドレスが表示されている取引先責任者のリスト。

取引先責任者リストの各項目は、ネストされた c-contact-list-item コンポーネントです。

c-contact-list-item コンポーネントは、selectHandler 関数を実行する onclick イベントリスナーで取引先責任者の名前と写真をアンカータグにラップします。

ユーザが取引先責任者をクリックして選択すると、コンポーネントは selected という CustomEvent を作成してディスパッチします。イベントには、選択された取引先責任者の ID である detail: this.contact.Id というデータが含まれます。親コンポーネントの c-event-custom は、取引先責任者の参照を使用して、取引先責任者の詳細を表示します。

c-event-with-data コンポーネントは、onselected 属性で selected イベントをリスンして、contactSelected イベントハンドラで処理します。

contactSelected イベントハンドラでは、コンポーネントは event.detail プロパティを contactId プロパティに割り当てます。そして、その ID を持つ取引先責任者を、@wire でプロビジョニングされた contacts 配列で探し、取引先責任者の名前、役職、電話番号、メールアドレスをテンプレートに表示します。

github.com/trailheadapps/lwc-recipes リポジトリの c-event-with-data コンポーネントをチェックアウトしてください。

関連トピック