Salesforce LWC learning simple knowledge summary chapter 3

First of all, I would like to thank elder brother edward of Changyuan for his great help.

Background: in front-end development, we often use the input box, and set required or other verification for this input box. When the conditions are not met, we use the user-defined UI or the standard input setCustomValidity and other operation methods to display the UI. We are https://www.cnblogs.com/zero-zyq/p/12734982.html Relevant operations are described. Today's content is based on this knowledge point. Code first

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;
    }
}

Display effect:

1. Move the input box in and out. Because the item has the requirements of mandatory fields, it will show you to complete this field

 2. When the input content and the focus are still in the input box, the required information will still be displayed

 3. When the focus is removed from the input box, the red mark disappears automatically

Some customers are very picky. They want to remove the red mark after entering the content, because the current input box is in a value state. Of course, this is well implemented. salesforce lwc provides us with setCustomValidity method, set the content to null, and then report. Optimized 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();
        }
    }
}

Display effect: at the beginning, it's red, no screenshot. When the content entered in the input box is still in the focus state, it's not displayed in the red box

This demand can be perfectly solved. In addition to this requirement, sometimes there are other similar requirements. For example, although it is an input box, there are many template contents to choose from. Click a button or select a radio box to add the contents to the input box. The effect of modifying the front and rear end codes is as follows:

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();
        }
    }
}

Display effect: when we first input the focus and move out of the display red box, click the button, the value is set, but it doesn't disappear??? Of course, at this time, we will disappear the focus, or we can disappear the red box. The same code, different effects.

After a round of fruitless questioning, I chatted with Edward in private. According to a little bit of code analysis, did you set the track? After a round of troubleshooting, my brother said, either you try checkValidity and use setTimeout first, and wait for him for a second to ensure that the value is assigned smoothly and the renderedCallback is completed, then these sentences can be effective. Try it quickly, so the following code becomes like this.

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);
    
}

Through the above code, after the assignment, it is magically done. According to the elder brother, the assignment has indeed changed after the assignment. It may not be rendered well. It calls the back, which leads to this embarrassing problem.

Conclusion: This article introduces how to use setTimeout for the following methods. I'm ashamed that I wrote about the usage of setTimeout in my blog before, but I can't think of this reason. There is no end to learning, and I still need to work harder. If there are mistakes in this article, please point them out, and if you don't understand the welcome message. There are other ways to realize it. Don't hesitate to give advice.

Posted by traffic on Sat, 14 May 2022 11:44:05 +0300