Получите значения HTML-элементов в JS для веб-компонентов Lightning

В веб-компонентах Lightning (LWC) мы можем использовать JavaScript для извлечения значений элементов HTML с помощью манипулирования DOM (объектной моделью документа). Вот пример того, как мы можем получить значения элементов HTML в файле JavaScript в LWC:

Использование события onchange в LWC:

<template>
    <lightning-input label = "First Name" onchange={firstNameHandler}></lightning-input>
    <lightning-input label = "Last Name" onchange={lastNameHandler}></lightning-input>
    <div class="slds-m-around_medium">
    First Name is {firstName} <br>
    Last Name is {lastName}
    </div>
</template>
import { LightningElement } from 'lwc';

export default class GetInput extends LightningElement {
    firstName;
    lastName;
    firstNameHandler(event)
    {
        this.firstName = event.target.value;
    }
    lastNameHandler(event)
    {
        this.lastName = event.target.value;
    }
    
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Недостатки события onchange в LWC:

1. Чрезмерное использование вызовов на стороне сервера: если событие onchange запускает действие на стороне сервера каждый раз, когда обнаруживается изменение, это может привести к чрезмерному количеству вызовов на стороне сервера. Это может повлиять на производительность и эффективность вашего компонента LWC, особенно в сценариях с частыми изменениями полей ввода.
2. Возможные проблемы с производительностью: если обработчик события onchange включает сложную логику или выполняет трудоемкие операции, это может повлиять на производительность вашего компонента LWC. Это может привести к замедлению времени отклика и ухудшению взаимодействия с пользователем.

Таким образом, вместо события onchange мы можем использовать такие атрибуты, как атрибут data-id, data-prop-value и lwc:ref.

Использование директивы lwc:ref:

<template>
    <div class="slds-m-around_medium">
    <lightning-input label = "First Name" lwc:ref="firstName"></lightning-input>
    <lightning-input label = "Last Name" lwc:ref="lastName"></lightning-input>
    <lightning-button label="Submit" onclick={submitHandler}></lightning-button>
    </div>
    <div class="slds-m-around_medium">
    First Name is {firstName} <br>
    Last Name is {lastName}
    </div>
</template>
    import { LightningElement } from 'lwc';export default class GetInput extends LightningElement {
    firstName;
    lastName;
    submitHandler()
    {
        this.firstName = this.refs.firstName.value;
        this.lastName = this.refs.lastName.value;
    }
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Использование атрибута data-id:

<template>
    <div class="slds-m-around_medium">
    <lightning-input label = "First Name" data-id="firstName"></lightning-input>
    <lightning-input label = "Last Name" data-id="lastName"></lightning-input>
    <lightning-button label="Submit" onclick={submitHandler}></lightning-button>
    </div>
    <div class="slds-m-around_medium">
    First Name is {firstName} <br>
    Last Name is {lastName}
    </div>
</template>
import { LightningElement } from 'lwc';

export default class GetInput extends LightningElement {
    firstName;
    lastName;
    submitHandler()
    {
        this.firstName = this.template.querySelector('[data-id="firstName"]').value;
        this.lastName = this.template.querySelector('[data-id="lastName"]').value;
    }
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Использование атрибута data-prop-name:

<template>
    <div class="slds-m-around_medium">
        <lightning-input label="First Name" data-prop-name="firstName"></lightning-input>
        <lightning-input label="Last Name" data-prop-name="lastName"></lightning-input>
        <lightning-button label="Submit" onclick={submitHandler}></lightning-button>
    </div>
    <div class="slds-m-around_medium">
    First Name is {firstName} <br>
    Last Name is {lastName}
    </div>
</template>
import { LightningElement } from 'lwc';

export default class GetInput extends LightningElement {
    firstName;
    lastName;
    submitHandler()
    {
        this.firstName = this.template.querySelector('[data-prop-name="firstName"]').value;
        this.lastName = this.template.querySelector('[data-prop-name="lastName"]').value;
    }
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Вывод:

Ссылки находят элементы DOM без селектора и запрашивают только элементы, присутствующие в указанном шаблоне, что делает их более производительными, чем querySelector. Поэтому мы должны воспользоваться директивой lwc:ref.