Loading
Salesforce から送信されるメールは、承認済ドメインからのみとなります続きを読む

ページの読み込み時に項目で Onchange イベントが起動する

公開日: Apr 30, 2026
説明
※この記事は英語版を翻訳しており、一部機械翻訳を含むため内容は後日更新される可能性があります。最新の内容は英語版を参照してください。表示言語は画面右下の言語名から切り替えられます。

onchange イベントを使用する入力項目が含まれる Lightning コンポーネント (特に picklistField) は、ページのロードまたは更新時に追加の onchange イベントを起動できます。

picklistField 値が None に設定されている場合、opportunity の flexipage に含まれる以下のような設定は、コンポーネントの初回ロード時に onchange イベントを起動します。

サンプル設定 
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" > 
    <aura:attribute name="displaySave" type="boolean" default="false" description="Displays Save button if changed"/>          
    <lightning:recordEditForm aura:id="recordEditForm"
                              recordId="{!v.recordId}"
                              objectApiName="Opportunity"
                              onsuccess="{!c.onSuccess}"
                              >
                 <lightning:messages />
                 <lightning:inputField fieldName="Custom_Picklist__c" aura:id="picklistField" onchange="{!c.onPicklistChange}"/>
                 <aura:if isTrue="{!v.displaySave}">
                     <lightning:button variant="brand" label="Save" type="submit"/>
                 </aura:if>
      </lightning:recordEditForm> 
</aura:component>

JS コントローラ: 
({
    onPicklistChange : function(component, event, helper)
    {
       component.set("v.displaySave", "true");
    },

    onSuccess: function(component, event, helper)
    {
        component.set("v.displaySave", false);
    }
})

 
解決策
この動作が発生するのは、API からデータがロードされた後に値が設定されると、まず change イベントが発生してから追加の change イベントが起動されるためですが、これは想定内の動作です。

ベストプラクティスは、どれだけ多くの change がいつ発生しても問題ないように change イベントに対応することです。

onload を使用して、項目が UI から変更されたかどうかをチェックする例を次に示します。この change は、UI で値が変更されるまでボタンに登録されません。 
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="displaySave" type="boolean" default="false" description="Displays Save button if changed"/>
    <aura:attribute name="currentRecord" type="Object"/><!--Added Attribute to track-->          
    
    <lightning:recordEditForm aura:id="recordEditForm"
                               recordId="{!v.recordId}"
                               objectApiName="Opportunity"
                               onsuccess="{!c.onSuccess}"
                               onload="{!c.onload}"
                               ><!--Added onload onload="{!c.onload}"-->
                 <lightning:messages />
                 <lightning:inputField fieldName="Custom_Picklist__c" aura:id="picklistField" onchange="{!c.onPicklistChange}"  />
                 <aura:if isTrue="{!v.displaySave}">
                     <lightning:button variant="brand" label="Save" type="submit"/>
                 </aura:if>
    </lightning:recordEditForm> 
</aura:component>

JS コントローラ 
({
     onPicklistChange : function(component, event, helper)
     {
         let fieldName = event.getSource().get("v.fieldName") ;
         let newValue =  event.getSource().get("v.value") ;
         let currentRecord = component.get("v.currentRecord") ;
         if(currentRecord[fieldName].value ==null && newValue == ""  )  { //we know the value is blank from the UI
              currentRecord[fieldName].value = newValue ;
              component.set("v.currentRecord", currentRecord);
         }
         else{
         component.set("v.displaySave", "true");
         }
     },
     onSuccess: function(component, event, helper)
     {
         component.set("v.displaySave", false);
     } ,
     onload: function(component, event, helper)
     {
         if(event.getParam("recordUi").record){
             component.set("v.currentRecord", JSON.parse(JSON.stringify(event.getParam("recordUi").record.fields)));
         }
     }
})
ナレッジ記事番号

000381002

 
読み込み中
Salesforce Help | Article