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 や lightning:menuItem などのコンポーネントは onactive ハンドラをサポートするため、ターゲットコンポーネントが有効になったときにそのコンポーネントへの参��を取得できます。コンポーネントを数回クリックすると、ハンドラが 1 回だけ呼び出されます。
たとえば、lightning:buttonMenu コンポーネントのメニュー項目がクリックされたときにそのチェックマークを切り替えることができます。
1<aura:component>
2 <lightning:buttonMenu alternativeText="Show menu">
3 <lightning:menuItem value="new" onactive="{! c.handleActive }" label="New" checked="true" />
4 <lightning:menuItem value="edit" onactive="{! c.handleActive }" label="Edit" checked="false" />
5 <lightning:menuItem value="delete" onactive="{! c.handleActive }" label="Delete" checked="false" />
6 </lightning:buttonMenu>
7</aura:component>1({
2 handleActive: function (cmp, event) {
3 var menuItem = event.getSource();
4 menuItem.set("v.checked", !menuItem.get("v.checked"));
5 }
6})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");