Salesforce LWC学习(二十六) 简单知识总结篇三

首先本篇感谢长源edward老哥的大力帮助。

背景:我们在前端开发的时候,经常会用到输入框,并且对这个输入框设置 required或者其他的验证,当不满足条件时使用自定义的UI或者使用标准的 input的 setCustomValidity等操作方式去进行UI的展示。我们在//www.cnblogs.com/zero-zyq/p/12734982.html有描述相关的操作,今天的内容就以这个知识点内容进行展开。首先先上代码

inputRequiredTest.html

<template>
    <lightning-card title="input demo">
        <lightning-input type="text" value={inputValue} onchange={handleChangeEvent} required label="test input">
        </lightning-input>
    </lightning-card>
</template>

inputRequiredTest.js

import { LightningElement, track } from 'lwc';

export default class InputRequiredTest extends LightningElement {
    @track inputValue = '';
    
    handleChangeEvent(event) {
        this.inputValue = event.detail.value;
    }
}

展示效果:

1. 输入框移入再移出,因为项目有必填字段的要求,所以会展示让你完成这个字段的填写

 2. 输入内容,焦点还在输入框中情况下,仍然展示要求必填的信息

 3. 从输入框中移出焦点,红色标记自动消失

 有一些客户很挑剔,希望的是当输入内容以后就要将红色标记移出,因为当前的输入框已经是有值的状态,当然这个很好实现,salesforce lwc给我们提供了 setCustomValidity方法,设置内容为空,再一report即可。优化后的 inputRequiredTest.js

import { LightningElement, track } from 'lwc';

export default class InputRequiredTest extends LightningElement {
    @track inputValue = '';
    
    handleChangeEvent(event) {
        this.inputValue = event.detail.value;
        if(this.template.querySelector('lightning-input').checkValidity()) {
            this.template.querySelector('lightning-input').setCustomValidity('');
            this.template.querySelector('lightning-input').reportValidity();
        }
    }
}

展示效果:最开始的时候是红色的不截图了,当输入框里面输入了内容还在焦点状态下,也不在展示红框

 此种需求便可以完美的解决。除了此种需求,有时候还会有其他类似的需求,比如当前尽管是输入框,但是有很多模板内容供选择,点击某个按钮或者选择某个单选框可以将内容给到输入框中。将前后端代码修改以后的效果如下:

inputRequiredTest.html

<template>
    <lightning-card title="input demo">
        <lightning-input type="text" value={inputValue} onchange={handleChangeEvent} required label="test input">
        </lightning-input><br/>
        <lightning-button label="set value" onclick={handleSetValueClick}></lightning-button>
    </lightning-card>
</template>

inputRequiredTest.js

import { LightningElement, track } from 'lwc';

export default class InputRequiredTest extends LightningElement {
    @track inputValue = '';
    
    handleChangeEvent(event) {
        this.inputValue = event.detail.value;
        if(this.template.querySelector('lightning-input').checkValidity()) {
            this.template.querySelector('lightning-input').setCustomValidity('');
            this.template.querySelector('lightning-input').reportValidity();
        }
    }

    handleSetValueClick(event) {
        this.inputValue = 'test';
        if(this.template.querySelector('lightning-input').checkValidity()) {
            this.template.querySelector('lightning-input').setCustomValidity('');
            this.template.querySelector('lightning-input').reportValidity();
        }
    }
}

展示效果:当我们先输入焦点,移出展示红框以后,点击按钮,值设置上了,竟然没有消失???当然,此时我们将焦点消失,还是可以红框消失。一样的代码,不一样的效果。

 问了一圈无果以后私聊了牛逼的Edward老哥,根据代码一点点分析,是否设置 track了啊等等一圈圈排查以后,老哥说,要么你先试试 checkValidity等几句使用 setTimeout,等他一秒,保证 这个值顺利赋值完,renderedCallback走完了,那这几句才能有效。赶紧去试试,于是后面的代码变成了下面这样。

handleSetValueClick(event) {
    this.inputValue = 'test';
    window.clearTimeout(this.delayTimeout);
    this.delayTimeout = setTimeout(() => {
        if(this.template.querySelector('lightning-input').checkValidity()) {
            this.template.querySelector('lightning-input').setCustomValidity('');
            this.template.querySelector('lightning-input').reportValidity();
        }
    }, 1000);
    
}

通过上述代码,当赋值以后,神奇的搞定了。按照老哥的说法,赋值以后确实改变了,可能还没有渲染好,调用了后面,导致了这种尴尬的问题。

 总结:篇中介绍了针对下面的这种方式如何使用 setTimeout搞定,很惭愧的是以前博客中写过 setTimeout的用法,但是这里却并想不到这个原因,学无止境,自己还需要更努力啊。篇中有错误地方欢迎指出,有不懂欢迎留言。有其他实现方式不吝赐教。