时间戳

首页 > 解决方案 > 在同一个流屏幕上验证多个所需的 LWC，而不会丢失值

javascript - 在同一个流屏幕上验证多个所需的 LWC，而不会丢失值

问题描述

所以我最近开始更认真地跳入 LWC，我正试图弄清楚这一切。我创建了一个自定义选项列表流组件，它接受一组字符串作为选项（为什么这不是标准的，我永远不会知道）。如果组件使用@api validate().

但是，问题在于，如果多个组件在同一个屏幕上，而一个组件验证失败；然后在显示一个非常简短的加载图标后，所有组件（甚至是有效组件）的值都会被清除。我想尽可能地模仿标准所需的屏幕组件/字段功能，以避免输入挫折和不一致。

以下是我当前的代码：

组件.js

import { LightningElement, api, track } from 'lwc';

export default class StringPicklistFlowComponent extends LightningElement {
    @api optionsArr;
    @api label;
    @api isRequired = false;
    @api value;

    get isNotRequired(){return !this.isRequired;}

    get options(){
        var arr = [];
        for(var i = 0; i < this.optionsArr.length; i++){
            var tmp = this.optionsArr[i].split(/,\s*/g);
            arr.push({label: tmp[0], value: tmp[1]});
        }
        return arr;
    }

    handleSelect(evt){
        this.value = evt.detail.value;
    }

    @api validate(){
        return {
            isValid: this.isNotRequired || this.value != null,
            errorMessage: "Please select an option"
        }
    }
}

组件.html

<template>
    <label for="customPicklist" class="slds-form-element__label slds-rich-text-editor__output">
        <span class="slds-required" hidden={isNotRequired}>*</span>
        {label}
    </label>
    <lightning-combobox id="customPicklist" value={value} options={options} onchange={handleSelect}>
    </lightning-combobox>
</template>

请注意，我确实手动创建了一个标签。这是因为当字段被直接标记为“必填”时的默认功能会在组件值为空时不断显示字段错误，这有点烦人。

对此的任何帮助都会很棒，因为这在一天的大部分时间里一直在唠叨我。

标签： javascriptsalesforcelwc

解决方案

我设法找到了解决方案，所以我会在这里发布，以防其他人遇到这个问题。基本上，问题归结为组件被重新渲染，因此丢失了以前的数据。为了解决这个问题，您可以使用本机浏览器sessionStorage存储值，然后在重新渲染时使用connectedCallback钩子设置组件值。这是我的代码现在的样子：

组件.js

import { LightningElement, api, track } from 'lwc';

export default class StringPicklistFlowComponent extends LightningElement {
    @api isRequired = false;
    @api optionsArr;
    @api label;
    @api value;

    @api connectedCallback(){
        if(!!sessionStorage[this.storageTag])
            this.value = sessionStorage[this.storageTag];
        else
            sessionStorage[this.storageTag] = this.value;
    }

    get storageTag(){ return this.label + 'myTag5135'; }

    get isNotRequired(){ return !this.isRequired; }

    get options(){
        var arr = [];
        for(var i = 0; i < this.optionsArr.length; i++){
            var tmp = this.optionsArr[i].split(/,\s*/g);
            arr.push({label: tmp[0], value: tmp[1]});
        }
        return arr;
    }

    handleSelect(evt){
        this.value = evt.detail.value;
        sessionStorage[this.storageTag] = this.value;
    }

    @api validate(){
        return {
            isValid: this.isNotRequired || !!this.value,
            errorMessage: "Please select an option"
        };
    }
}

组件.html

<template>
    <div>
        <label for="customPicklist" class="slds-form-element__label">
            <abbr class="slds-required" hidden={isNotRequired}>* </abbr>{label}
        </label>
        <lightning-combobox dropdown-alignment="auto" id="customPicklist" data-fieldname={label} variant="label-hidden" value={value} options={options} onchange={handleSelect}>
        </lightning-combobox>
    </div>
</template>

如果您注意到，我正在使用不理想的标签属性（没有强制执行它是唯一的）。我想在流程中使用组件 api 名称，这样我几乎可以保证唯一性，但是我还没有找到如何在组件中获取这个默认属性。如果有人知道怎么做，我将不胜感激。无论如何，我希望这可以帮助那些对这个奇怪的默认限制有类似挫败感的人。

推荐阅读