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

押下されたボタンの確認

複数のボタンがあるコンポーネントで押下されたボタンを確認するには、Component.getLocalId() を使用します。

このフレームワークは、ui:button と lightning:buttonの 2 つのボタンコンポーネントを提供します。

Lightning Design System のスタイル設定に付属するボタンコンポーネント、lightning:button を使用することをおすすめします。

メモ

それでは、複数の ui:button コンポーネントの例を見てみましょう。各ボタンには、aura:id 属性によって設定された一意のローカル ID があります。

1<!--c:buttonPressed-->
2<aura:component>
3    <aura:attribute name="whichButton" type="String" />
4    
5    <p>You clicked: {!v.whichButton}</p>
6
7    <ui:button aura:id="button1" label="Click me" press="{!c.nameThatButton}"/>
8    <ui:button aura:id="button2" label="Click me too" press="{!c.nameThatButton}"/>
9</aura:component>

クライアント側コントローラで event.getSource() を使用して、クリックされたボタンコンポーネントを取得します。getLocalId() をコールして、クリックされたボタンの aura:id を取得します。

1/* buttonPressedController.js */
2({
3    nameThatButton : function(cmp, event, helper) {
4        var whichOne = event.getSource().getLocalId();
5        console.log(whichOne);
6        cmp.set("v.whichButton", whichOne);
7    }
8})

lightning:button を使用している場合は、press イベントハンドラではなく onclick イベントハンドラを使用します。

1<aura:component>
2    <aura:attribute name="whichButton" type="String" />
3    
4    <p>You clicked: {!v.whichButton}</p>
5
6    <lightning:button aura:id="button1" name="buttonname1" label="Click me" onclick="{!c.nameThatButton}"/>
7    <lightning:button aura:id="button2" name="buttonname2" label="Click me" onclick="{!c.nameThatButton}"/>
8</aura:component>

クライアント側コントローラでは、次のいずれかのメソッドを使用して、どのボタンがクリックされたかを明らかにできます。

event.getSource().getLocalId() はクリックされたボタンの aura:id を返します。
event.getSource().get("v.name") はクリックされたボタンの name を返します。

Lightning コンポーネント開発者ガイド

押下されたボタンの確認

関連項目: