设置从属自定义 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
本文介绍了设置从属自定义 Lightning 选择列表 Level2 和 Level3，然后在 Lightning 组件重置 Level2，但 Level2 缓存数据正在保存的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
第一步
在 Salesforce Lightning 组件中，我有一个包含三个级别的依赖选项列表的场景，首先我设置选项列表 Level1 和 Level2 的值，然后用户在 Level3 中选择依赖选项列表值
第 2 步
当我删除 Level2 的选择时，Level3 的选择也会自动删除:
第三步
点击保存
这里有问题，第 1 步中选择的值将被保存，而不是第 2 步中的重置值.
我在 ui:inputSelectOption 添加了代码来重置值，但似乎闪电组件的重置值没有被重置，而是在我点击保存后保存了缓存的值.
请帮助修复代码，使闪电组件不保存缓存的值，而是保存当前的闪电组件值.
这是组件代码:
<ui:inputSelect aura:id="ddLevel1";更改={!c.getLvl1}"><ui:inputSelectOption label="-Select-";值=真"/><aura:iteration items="{!v.lstLevel1}";var=值"><ui:inputSelectOption label="{!value}";text="{!value}";/></aura:iteration></ui:inputSelect><span>Level 2</span><ui:inputSelect aura:id="ddLevel2";更改={!c.getSelectedValue}"><ui:inputSelectOption label="-Select-";值={!v.clrlv1}"/><aura:iteration items="{!v.lstLevel2}";var=值"><ui:inputSelectOption label="{!value}";text="{!value}";/></aura:iteration></ui:inputSelect><span>级别 3</span><ui:inputSelect aura:id="ddLevel3";><ui:inputSelectOption label="-Select-";值={!v.clrlv2}"/><aura:iteration items="{!v.lstL3}";var=值"><ui:inputSelectOption label="{!value}";text="{!value}";/></aura:iteration></ui:inputSelect><闪电:按钮变体=品牌"标签=保存"onclick="{!c.onConfirm}";/></aura:component> 这里是控制器代码
<代码>({重置1:功能(组件，事件，助手){component.set("v.clrlvl", "");},重置2:功能(组件，事件，助手){component.set("v.clrlv2", "");},onPageReferenceChanged: function(cmp, event, helper) {$A.get('e.force:refreshView').fire();},doInit :函数(组件，事件，助手){var action = component.get(c.getLevel1");action.setCallback(this, function(e) {if(e.getState()=='成功'){var 结果=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()=='成功'){var 结果=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' : 选择列表值，'strName2':picklistvaluedep2});//action.setCallback(this, function(e) {if(e.getState()=='成功'){var 结果=e.getReturnValue();component.set(v.lstL3",result);}});$A.enqueueAction(action);},onConfirm:功能(组件，事件，助手){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()=='成功'){var 结果=e.getReturnValue();如果(结果==='成功'){toastEvent.setParams({标题":成功！"，消息":记录已成功插入."});toastEvent.fire();}别的{toastEvent.setParams({标题":错误"，消息":记录未成功插入."});toastEvent.fire();}}});$A.enqueueAction(action);}}) 解决方案
这个问题得到了修复，因为当 1 级选择列表发生变化时我没有刷新 3 级选择列表，所以在 onchange 添加了一个 onchange代码>Level3
同时将 getSelectedValue 复制到 getLvl1 函数中的 Helper 使用helper.getSelectedValue(component,event,helper); (要记住，helper 类的一个很好的用途是当我们需要重复调用某些代码或方法时，它会更好将该函数放入 helper ) 并在 component 处再次调用，还更改了 <ui:inputSelect 与新的 aura 组件，例如 <lightning:选择
这里是组件
<option value="">--- None ---</option><aura:iteration items="{!v.lstLevel1}";var=值"><option value="{!value}">{!value}</option></aura:iteration></lightning:select><闪电:选择名称=Level2Picklist"标签=级别 2"光环:id =ddLevel2"onchange="{!c.getSelectedValue}";><option value="">--- None ---</option><aura:iteration items="{!v.lstLevel2}";var=值"><option value="{!value}">{!value}</option></aura:iteration></lightning:select><闪电:选择名称=Level3Picklist"标签=级别 3"光环:id =ddLevel3"onchange="{!c.getlevel3}";><option value="">--- None ---</option><aura:iteration items="{!v.lstL3}";var=值"><option value="{!value}">{!value}</option></aura:iteration></lightning:select> <闪电:按钮变体=品牌"标签=保存"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()=='成功'){var 结果=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()=='成功'){var 结果=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' : 选择列表值，'strName2':picklistvaluedep2});//action.setCallback(this, function(e) {if(e.getState()=='成功'){var 结果=e.getReturnValue();component.set(v.lstL3",result);}});$A.enqueueAction(action);},getlevel3:功能(组件，事件，助手){var picklist=component.find('ddLevel3');var picklistvalue=picklist.get('v.value');component.set(v.thirdlevelselected",picklistvalue);},onConfirm:功能(组件，事件，助手){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()=='成功'){var 结果=e.getReturnValue();如果(结果==='成功'){toastEvent.setParams({标题":成功！"，消息":记录已成功插入."});toastEvent.fire();}别的{toastEvent.setParams({标题":错误"，消息":记录未成功插入."});toastEvent.fire();}}});$A.enqueueAction(action);},})这里是helper类
({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' : 选择列表值，'strName2':picklistvaluedep2});//action.setCallback(this, function(e) {if(e.getState()=='成功'){var 结果=e.getReturnValue();component.set(v.lstL3",result);}});$A.enqueueAction(action);},getlevel3:功能(组件，事件，助手){var picklist=component.find('ddLevel3');var picklistvalue=picklist.get('v.value');component.set(v.thirdlevelselected",picklistvalue);}})Step 1
In a Salesforce Lightning component I have a scenario with three levels of dependent picklists, first I am setting values for picklist Level1, and Level2, then the user selects the dependent picklist value in Level3
Step 2
When I remove the selection at Level2, automatically Level3 selection also gets erased:
Step3
Click Save
Here is problem, that value selected in Step 1 is getting saved rather than the reset value in step 2.
I have added code to reset values at ui:inputSelectOption but it seems the reset values from lightning components are not getting reset and saved rather cached values are getting saved after I click save.
Please help in fixing the code such that lightning component doesn't saves the cached values rather it saves the current lightning component values.
Here is the component code:
<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>
here is contoller code
({
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);
}
})
解决方案
This got fixed because I not refreshing the Level 3 picklist when the Level 1 picklist was getting changed,so added an onchange at Level3
Also copied getSelectedValue to Helper at getLvl1 function using
helper.getSelectedValue(component,event,helper); (It is to be remembered one good use of helper class is this when we need some code or method to be repeatedly called,so its better to put that function in helper ) and called again at component also changed the <ui:inputSelect with new aura components like <lightning:select
Here is component
<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>
Here is controller 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);
},
})
Here is helper class
({
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);
}
})
这篇关于设置从属自定义 Lightning 选择列表 Level2 和 Level3，然后在 Lightning 组件重置 Level2，但 Level2 缓存数据正在保存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
