この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。
英語に切り替える

Lightning 基本コンポーネントでのイベント処理

基本コンポーネントは軽量で、HTML マークアップによく似ています。標準的な HTML の手法に従って、onfocus などのイベントハンドラを属性として提供します。ui 名前空間のコンポーネントのように、Lightning コンポーネントイベントを登録して起動するのではありません。

マークアップを見て、event.target または event.currentTarget を使用して DOM 要素にアクセスするのではないかと思うかもしれません。けれども、この方法によるアクセスでは、変更される可能性のある別のコンポーネントの DOM 要素にアクセス可能になるため、カプセル化が壊れます。

LockerService (Summer '17 ですべての組織で有効化になる予定) は、カプセル化を適用するものです。ここで説明するメソッドを使用して、コードを LockerService に対応させます。

イベントを起動したコンポーネントを取得するには、event.getSource() を使用します。

この構文を使用して、イベントに渡されたコンポーネント属性を取得します。

イベントハンドラの再利用

event.getSource() は、どのコンポーネントがイベントを起動したかを判断するうえで役立ちます。たとえば、同じ onclick ハンドラを再利用するボタンがいくつかあるとします。イベントを起動したボタンの名前を取得するには、event.getSource().get("v.name") を使用します。

onactive ハンドラを使用した有効なコンポーネントの取得

タブを使用する場合、どのタブが有効かを知る必要があります。lightning:tab コンポーネントを使用すると、onactive ハンドラを使用してターゲットコンポーネントが有効になったときに、ターゲットコンポーネントへの参照を取得できます。コンポーネントを数回クリックすると、ハンドラが 1 回だけ呼び出されます。

onselect ハンドラを使用した ID および値の取得

一部のコンポーネントは、イベントを子コンポーネントに渡すイベントハンドラを提供します。次のコンポーネントの onselect イベントハンドラなどです。
  • lightning:buttonMenu
  • lightning:tabset
event.detail 構文は引き続きサポートされますが、今後のリリースで event.detail は廃止される予定であるため、onselect ハンドラで次のパターンを使用するように JavaScript コードを更新することをお勧めします。
  • event.getParam("id")
  • event.getParam("value")
たとえば、クライアント側コントローラから lightning:buttonMenu コンポーネントで選択されたメニュー項目の値を取得できます。
同様に、lightning:tabset コンポーネントで選択されたタブの ID を取得するには、次のコードを使用します。

ターゲットコンポーネントへの参照が必要な場合は、代わりに onactive イベントハンドラを使用します。

メモ