Lightning コンポーネント開発者ガイド
jLightning 基本コンポーネントでのイベント処理
基本コンポーネントは軽量で、HTML マークアップによく似ています。標準的な HTML の手法に従って、onfocus などのイベントハンドラを属性として提供します。ui 名前空間のコンポーネントのように、Lightning コンポーネントイベントを登録して起動するのではありません。
マークアップを見て、event.target または event.currentTarget を使用して DOM 要素にアクセスするのではないかと思うかもしれません。けれども、この方法によるアクセスでは、変更される可能性のある別のコンポーネントの DOM 要素にアクセス可能になるため、カプセル化が壊れます。
LockerService (Summer '17 ですべての組織で有効化になる予定) は、カプセル化を適用するものです。ここで説明するメソッドを使用して、コードを LockerService に対応させます。
イベントを起動したコンポーネントを取得するには、event.getSource() を使用します。
1<aura:component>
2 <lightning:button name="myButton" onclick="{!c.doSomething}"/>
3</aura:component>1({
2 doSomething: function(cmp, event, helper) {
3 var button = event.getSource();
4
5 //The following patterns are not supported
6 //when you’re trying to access another component’s
7 //DOM elements.
8 var el = event.target;
9 var currentEl = event.currentTarget;
10 }
11})イベントハンドラの���利用
event.getSource() は、どのコンポーネントがイベントを起動したかを判断するうえで役立ちます。たとえば、同じ onclick ハンドラを再利用するボタンがいくつかあるとします。イベントを起動したボタンの名前を取得するには、event.getSource().get("v.name") を使用します。
1<aura:component>
2 <lightning:button label="New Record" name="new" onclick="{!c.handleClick}"/>
3 <lightning:button label="Edit" name="edit" onclick="{!c.handleClick}"/>
4 <lightning:button label="Delete" name="delete" onclick="{!c.handleClick}"/>
5</aura:component>1({
2 handleClick: function(cmp, event, helper) {
3 //returns "new", "edit", or "delete"
4 var buttonName = event.getSource().get("v.name");
5 }
6})onactive ハンドラを使用した有効なコンポーネントの取得
タブを使用��る場合、どのタブが有効かを知る必要があります。lightning:tab コンポーネントを使用すると、onactive ハンドラを使用してターゲットコンポーネントが有効になったときに、ターゲットコンポーネントへの参照を取得できます。コンポーネントを数回クリックすると、ハンドラが 1 回だけ呼び出されます。
1<aura:component>
2 <lightning:tabset>
3 <lightning:tab onactive="{! c.handleActive }" label="Tab 1" id="tab1" />
4 <lightning:tab onactive="{! c.handleActive }" label="Tab 2" id="tab2" />
5 </lightning:tabset>
6</aura:component>1({
2 handleActive: function (cmp, event) {
3 var tab = event.getSource();
4 switch (tab.get('v.id')) {
5 case 'tab1':
6 //do something when tab1 is clicked
7 break;
8 case 'tab2':
9 //do something when tab2 is clicked
10 break;
11 }
12 }
13})onselect ハンドラを使用した ID および値の取得
一部のコンポーネントは、イベントを子コンポーネントに渡すイベントハンドラを提供します。次のコンポーネントの onselect イベントハンドラなどです。
- lightning:buttonMenu
- lightning:tabset
event.detail 構文は引き続きサポートされますが、今後のリリースで event.detail は廃止される予定であるため、onselect ハンドラで次のパターンを使用するように JavaScript コードを更新することをお勧めします。
同様に、lightning:tabset コンポーネントで選択されたタブの ID を取得するには、次のコードを使用します。- event.getParam("id")
- event.getParam("value")
1//Before
2var menuItem = event.detail.menuItem;
3var itemValue = menuItem.get("v.value");
4//After
5var itemValue = event.getParam("value");1//Before
2var tab = event.detail.selectedTab;
3var tabId = tab.get("v.id");
4//After
5var tabId = event.getParam("id");