Lightning コンポーネント開発 TIPS: クリックされたボタンを特定する方法

今日は、Lightning コンポーネントが動いている Aura フレームワーク の onclick 属性についてです。
一般的な html の onclick 属性では、インラインで js の関数を呼び出せます。また、同時に引数も渡せるのでクリックされたボタンの特定が容易です。

<script>
function onButtonClicked(buttonId) {
  alert(buttonId + ' is clicked!');
}
</script>
<input type="button" value="ボタン1" onclick="onButtonClicked('button1')" />
<input type="button" value="ボタン2" onclick="onButtonClicked('button2')" />

一方、Lightning コンポーネントではマークアップ(.cmp)からの直接的な js 関数の呼び出しが行なえません。
代わりに、コントローラーファイルに記述した関数への参照を渡すことになります。
このため、関数に引数を直接渡せなくなっており、クリックされたボタンの特定が難しくなります。

sample.cmp

<input type="button" value="ボタン1" onclick="{!c.onButtonClicked}" />
<input type="button" value="ボタン2" onclick="{!c.onButtonClicked}" />

sampleController.js

onButtonClicked: function(c, e, h) {
  // どのボタンが押されたか分からない。
}

静的なボタンの場合は、それぞれのボタンの役割(OKやキャンセルなど)が決まっているので、ボタン毎に関数を分ければ解決します。
ところが、繰り返し処理などで動的にボタンが作成される場合、別々の関数を割り当てることが出来ません。
と言うことで、(前置きが長くなりましたが) Lighting コンポーネントでクリックされたボタンを特定する方法をご紹介します。

サンプルコード

レコード ID のリストをデータテーブルとして描画するコンポーネントのサンプルです。
それぞれのレコード ID 毎に、<a>、<input type="button">、<lightning:button> を動的に作成し、クリックされたらそのボタンが紐づくレコード ID を alert で表示します。

<a>、<input type="button"> のような html タグでは、data 属性が使えるので活用しましょう。
<lightning:button> のような Lightning ダグでは、用意された属性しか使えないので注意が必要です。

ClickTest.cmp

<aura:component access="global" implements="flexipage:availableForAllPageTypes"  >
    
    <!-- Private Attributes -->
    <aura:attribute access="private" type="String[]" name="recordIds" default="000AAAAAAAAAAAAAAA,000AAAAAAAAAAAAAAB,000AAAAAAAAAAAAAAC" />
    
    <!-- User Interface -->
    <div>
        <lightning:card >
            <aura:set attribute="title">
               クリックイベントの発火元を特定する方法
            </aura:set>
            <table class="slds-table slds-table_bordered">
                <thead>
                    <tr><th>レコード ID</th><th>a タグ</th><th>input タグ</th><th>lightning:button　タグ</th></tr>
                </thead>
                <tbody>
                    <aura:iteration items="{!v.recordIds}" var="recordId" >
                        <tr>
                            <td>{!recordId}</td>
                            <td><a href="javascript:void(0);" class="slds-text-link" data-recordid="{!recordId}" onclick="{!c.onLinkClicked}">Click Me</a></td>
                            <td><input type="button" value="Click Me" class="slds-button" data-recordid="{!recordId}" onclick="{!c.onInputButtonClicked}" /></td>
                            <td><lightning:button label="Click Me" name="{!recordId}" value="{!recordId}" onclick="{!c.onLightingButtonClicked}"/></td>
                        </tr>
                    </aura:iteration>
                </tbody>
            </table>
        </lightning:card>
    </div>
</aura:component>

ClickTestController.js

({
	onLinkClicked: function(c, e, h) {
        const recordId = e.currentTarget.dataset.recordid;
        alert(recordId);
	},
    onInputButtonClicked: function(c, e, h) {
        const recordId = e.currentTarget.dataset.recordid;
        alert(recordId);
    },
    onLightingButtonClicked: function(c, e, h) {
		const sourceComponent = e.getSource();
        const name = sourceComponent.get('v.name');
        const value = sourceComponent.get('v.value'); 
        alert("name: " + name + "\nvalue: " + value);
	}
})