设置相关的自定义 Lightning 选项列表 Level2 和 Level3,然后在 Lightning 组件上重置 Level2,但 Level2 缓存数据正在保存

Setting Dependent Custom Lightning Picklist Level2 and Level3 then resetting the Level2 at Lightning component but Level2 Cached Data is Getting Saved

步骤 1

在 Salesforce Lightning 组件中,我有一个包含三个级别的依赖选项列表的场景,首先我为选项列表级别 1 和级别 2 设置值,然后用户在级别 3 中选择依赖选项列表值

步骤 2

当我删除 Level2 的选择时,Level3 的选择也会自动被删除:

步骤3

点击保存

这是个问题,保存的是第 1 步中选择的值,而不是第 2 步中的重置值。

我在 ui:inputSelectOption 添加了重置值的代码,但似乎闪电组件的重置值没有重置和保存,而是在我单击保存后保存缓存值。

请帮助修复代码,使闪电组件不保存缓存值,而是保存当前闪电组件值。

组件代码如下:

<aura:component controller="PickListHandler" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
  <!-- Actions-->
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  <aura:handler name="change" value="{!v.pageReference}"
          action="{!c.onPageReferenceChanged}" />
  <!-- variable-->
  <aura:attribute name="lstLevel1" type="String[]" />
    <aura:attribute name="lstLevel2" type="String[]" />
    <aura:attribute name="lstL3" type="String[]" />
  <span> Level 1</span>
  <ui:inputSelect aura:id="ddLevel1" change="{!c.getLvl1}">
    <ui:inputSelectOption label="-Select-" value="true"/>        
    <aura:iteration items="{!v.lstLevel1}" var="value">          
      <ui:inputSelectOption label="{!value}" text="{!value}" />
    </aura:iteration>
  </ui:inputSelect>
  <span>Level 2</span>
  <ui:inputSelect aura:id="ddLevel2"  change="{!c.getSelectedValue}">
      <ui:inputSelectOption label="-Select-" value="{!v.clrlv1}"/>        
    <aura:iteration items="{!v.lstLevel2}" var="value">          
      <ui:inputSelectOption label="{!value}" text="{!value}" />
    </aura:iteration>
  </ui:inputSelect>
    <span>Level 3</span>
  <ui:inputSelect aura:id="ddLevel3" >
    <ui:inputSelectOption label="-Select-" value="{!v.clrlv2}"/>        
    <aura:iteration items="{!v.lstL3}" var="value">          
      <ui:inputSelectOption label="{!value}" text="{!value}" />
    </aura:iteration>
  </ui:inputSelect>
    <lightning:button variant="brand" label="Save" onclick="{!c.onConfirm}" />
</aura:component>

这里是控制器代码

({
  reset1 : function(component, event, helper) {
      component.set("v.clrlvl", "");
    },
  reset2 : function(component, event, helper) {
      component.set("v.clrlv2", "");
    },onPageReferenceChanged: function(cmp, event, helper) {
      $A.get('e.force:refreshView').fire();
    },
  doInit : function(component, event, helper) {
      var action = component.get("c.getLevel1");
      action.setCallback(this, function(e) {
        if(e.getState()=='SUCCESS'){
          var result=e.getReturnValue();
          component.set("v.lstLevel1",result);
        }
      });
      $A.enqueueAction(action);
    },    
  getLvl1:function(component, event, helper){
        
      var picklist=component.find('ddLevel1');
      var picklistvalue=picklist.get('v.value');
      var action = component.get("c.getLevel2");
      action.setParams({  'strName' : picklistvalue  });
      action.setCallback(this, function(e) {
        if(e.getState()=='SUCCESS'){
          var result=e.getReturnValue();
          component.set("v.lstLevel2",result);
        }
      });
      $A.enqueueAction(action);
        },
    getSelectedValue:function(component, event, helper){
      var picklist=component.find('ddLevel1');
      var picklistvalue=picklist.get('v.value');
      var picklistdep=component.find('ddLevel2');
      var picklistvaluedep2=picklistdep.get('v.value');
      var action = component.get("c.getLevel3");
      action.setParams({  'strName1' : picklistvalue,
                'strName2' : picklistvaluedep2});//
      action.setCallback(this, function(e) {
        if(e.getState()=='SUCCESS'){
          var result=e.getReturnValue();
          component.set("v.lstL3",result);
        }
      });
      $A.enqueueAction(action);
    },
    onConfirm:function(component, event, helper){
      var picklist=component.find('ddLevel1');
      var picklistvalue=picklist.get('v.value');
      var picklistdep=component.find('ddLevel2');
      var picklistvaluedep2=picklistdep.get('v.value');
        
      var picklistdep3=component.find('ddLevel3');
      var picklistvaluedep3=picklistdep3.get('v.value');
      var action = component.get("c.savecasetype");
      
      action.setParams({  'level1' : picklistvalue,
                'level2' : picklistvaluedep2,
                'level3' : picklistvaluedep3,
                'id' : component.get("v.recordId")});
                
      
      var toastEvent = $A.get("e.force:showToast");
      action.setCallback(this, function(e) {
        if(e.getState()=='SUCCESS'){
          var result=e.getReturnValue();
          if(result==='successfull'){
            toastEvent.setParams({
              "title": "Success!",
              "message": "The record has been inserted  successfully."
            });
            toastEvent.fire();
          }else{
            toastEvent.setParams({
              "title": "Error",
              "message": "The record has not been inserted  successfully."
            });
            toastEvent.fire();
          }
        }
      });
      $A.enqueueAction(action);
        
    }
})

这已得到修复,因为当 1 级选项列表发生变化时我没有刷新 3 级选项列表,因此在 Level3

处添加了一个 onchange

也将 getSelectedValue 复制到 getLvl1 处的 Helper 函数使用 helper.getSelectedValue(component,event,helper); (要记住helper的一个好用法class就是当我们需要重复调​​用某些代码或方法时,最好把那个函数放在helper ) 并在 component 处再次调用也用 <lightning:select

等新的光环组件更改了 <ui:inputSelect

这里是组件

                <aura:component controller="PickListHandler" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
                    <!-- Actions-->
                    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
                  
                    <!-- variable-->
                    <aura:attribute name="lstLevel1" type="String[]" />
                     <aura:attribute name="lstLevel2" type="String[]"  />
                      <aura:attribute name="lstL3"  type="String[]"  />
                        <aura:attribute name="firstlevel1selected" type="String" default="" />
                     <aura:attribute name="secondlevelselected" type="String" default="" />
                      <aura:attribute name="thirdlevelselected"  type="String" default="" />
                    
                       <div class="slds-container--center slds-container--small slds-m-top--small">
                        <div class="slds-form--stacked">
                             
                            <lightning:select name="parentPicklist" label="Level 1" aura:id="ddLevel1" onchange="{!c.getLvl1}">
                                <option value="">--- None ---</option>
                                <aura:iteration items="{!v.lstLevel1}" var="value">
                                    <option value="{!value}">{!value}</option>
                                </aura:iteration>
                            </lightning:select>
                             
                            <lightning:select name="Level2Picklist" label="Level 2" aura:id="ddLevel2"  onchange="{!c.getSelectedValue}" >
                                <option value="">--- None ---</option>
                                <aura:iteration items="{!v.lstLevel2}" var="value">
                                    <option value="{!value}">{!value}</option>
                                </aura:iteration>
                            </lightning:select>
                            
                             <lightning:select name="Level3Picklist" label="Level 3" aura:id="ddLevel3" onchange="{!c.getlevel3}"  >
                                <option value="">--- None ---</option>
                                <aura:iteration items="{!v.lstL3}" var="value">
                                    <option value="{!value}">{!value}</option>
                                </aura:iteration>
                            </lightning:select>
                             
                        </div>        
                    </div>
                   <lightning:button variant="brand" label="Save" onclick="{!c.onConfirm}" />
                </aura:component>

这里是控制器js

                doInit : function(component, event, helper) {
                    var action = component.get("c.getLevel1");
                    action.setCallback(this, function(e) {
                        if(e.getState()=='SUCCESS'){
                            var result=e.getReturnValue();
                            component.set("v.lstLevel1",result);
                        }
                    });
                    $A.enqueueAction(action);
                },    
                getLvl1:function(component, event, helper){
                   
                    var picklist=component.find('ddLevel1');
                    var picklistvalue=picklist.get('v.value');
                    component.set("v.firstlevel1selected",picklistvalue);
                    var action = component.get("c.getLevel2");
                    action.setParams({  'strName' : picklistvalue  });
                    action.setCallback(this, function(e) {
                        if(e.getState()=='SUCCESS'){
                            var result=e.getReturnValue();
                            component.set("v.lstLevel2",result);
                            helper.getSelectedValue(component,event,helper);
                        }
                    });
                    $A.enqueueAction(action);
                        },
                getSelectedValue:function(component, event, helper){
                    var picklist=component.find('ddLevel1');
                   
                    var picklistvalue=picklist.get('v.value');
                     
                    var picklistdep=component.find('ddLevel2');
                    
                    var picklistvaluedep2=picklistdep.get('v.value');
                    component.set("v.secondlevelselected",picklistvaluedep2);
                    var action = component.get("c.getLevel3");
                    
                    action.setParams({  'strName1' : picklistvalue,
                                     'strName2' : picklistvaluedep2});//
                    action.setCallback(this, function(e) {
                        if(e.getState()=='SUCCESS'){
                            var result=e.getReturnValue();
                            component.set("v.lstL3",result);
                        }
                    });
                    $A.enqueueAction(action);
                },
                getlevel3:function(component, event, helper){
                    var picklist=component.find('ddLevel3');
                   
                    var picklistvalue=picklist.get('v.value');
                     component.set("v.thirdlevelselected",picklistvalue);
                    
                },
                onConfirm:function(component, event, helper){
                    var picklist=component.find('ddLevel1');
                    var picklistvalue=picklist.get('v.value');
                    var picklistdep=component.find('ddLevel2');
                    var picklistvaluedep2=picklistdep.get('v.value');
                   
                    var picklistdep3=component.find('ddLevel3');
                    var picklistvaluedep3=picklistdep3.get('v.value');
                    console.log(component.get('v.firstlevel1selected'));
                     console.log(component.get('v.secondlevelselected'));
                     console.log(component.get('v.thirdlevelselected'));
                    
                    var action = component.get("c.savecasetype");
                    
                    action.setParams({  'level1' : picklistvalue,
                                      'level2' : picklistvaluedep2,
                                      'level3' : picklistvaluedep3,
                                      'id' : component.get("v.recordId")});
                                      
                    
                    var toastEvent = $A.get("e.force:showToast");
                    action.setCallback(this, function(e) {
                        if(e.getState()=='SUCCESS'){
                            var result=e.getReturnValue();
                            if(result==='successfull'){
                                toastEvent.setParams({
                                    "title": "Success!",
                                    "message": "The record has been inserted  successfully."
                                });
                                toastEvent.fire();
                            }else{
                                toastEvent.setParams({
                                    "title": "Error",
                                    "message": "The record has not been inserted  successfully."
                                });
                                toastEvent.fire();
                            }
                        }
                    });
                    $A.enqueueAction(action);
                   
                },
                   
                   
            })              

这里是helperclass

            ({
                 getSelectedValue:function(component, event, helper){
                    var picklist=component.find('ddLevel1');
                   
                    var picklistvalue=picklist.get('v.value');
                     
                    var picklistdep=component.find('ddLevel2');
                    
                    var picklistvaluedep2=picklistdep.get('v.value');
                    component.set("v.secondlevelselected",picklistvaluedep2);
                    var action = component.get("c.getLevel3");
                    
                    action.setParams({  'strName1' : picklistvalue,
                                     'strName2' : picklistvaluedep2});//
                    action.setCallback(this, function(e) {
                        if(e.getState()=='SUCCESS'){
                            var result=e.getReturnValue();
                            component.set("v.lstL3",result);
                        }
                    });
                    $A.enqueueAction(action);
                },
                getlevel3:function(component, event, helper){
                    var picklist=component.find('ddLevel3');
                   
                    var picklistvalue=picklist.get('v.value');
                     component.set("v.thirdlevelselected",picklistvalue);
                    
                }
            })