Pase el valor del campo de entrada Lightning de un clic de botón al controlador de componentes web Lightning

Última actualización el 19 de junio de 2022 por Rakesh Gupta

Gran idea o pregunta duradera:

¿Cómo pasar el valor del campo de entrada de rayos como un parámetro al método de clase del controlador en el Componente web Lightning?

Objetivos:

Después de leer este blog, podrá:

Comprender qué es el campo de entrada de rayos y cómo trabajar con ellos
Comprenda cuándo usar querySelector vs querySelectorAll para acceder al elemento
Use el atributo de datos personalizados para consultar o configurar el componente lwc
Pase el valor del campo de entrada lightning al controlador del componente web lightning (lwc)

En el pasado se escribieron algunos artículos sobre Lightning Web Component . ¿Por qué no echarles un vistazo mientras estás en ello?

Rachel Gillett trabaja como desarrolladora junior en Gurukul on Cloud (GoC). Comenzó a aprender el componente web lightning y se preguntaba si alguien podría ayudarla a entender cómo crear la siguiente pantalla y pasar los valores de los campos móviles y de correo electrónico al controlador de JavaScript de lwc con un clic en el botón ( Siguiente ).

¿Qué es un componente de entrada de rayos ?

El componente lightning-input se utiliza para crear formularios interactivos para aceptar datos del usuario; una amplia variedad de tipos de tipos de entrada y atributos están disponibles, dependiendo de los casos de uso. El elemento de entrada de rayos es uno de los más poderosos y complejos en todos los componentes de LWC debido a la gran cantidad de combinaciones de tipos de entrada y atributos.

Este componente admite los siguientes tipos de entrada:

caja
botón de casilla de verificación
fecha
fecha y hora
tiempo
Email
expediente
clave
búsqueda
teléfono
URL
número
texto (predeterminado)
palanca

Atributos de datos en componentes web Lightning

Mientras trabajamos con un componente web lightning, a veces queremos pasar los valores de los componentes a JavaScript con un clic de botón. Puede hacer esto de muchas maneras, y el atributo de datos es una de ellas.

Por ejemplo, estamos mostrando un formulario con pocos campos de entrada. Queremos pasar los valores ingresados al archivo JavaScript del componente al hacer clic en el botón. Para lograr esto, cree los atributos personalizados agregando cualquier cadena a data- y brindándole la información, como data-name , data-element , data-title , etc. Recuerde, solo puede ingresar valores de cadena en el atributos de datos.

Sintaxis


<entrada de rayo escriba = "correo electrónico" elemento de datos = "correo electrónico de entrada de usuario" label="Dirección de correo electrónico"> </relámpago-entrada>

Uso de querySelector y querySelectorAll

QuerySelector() y querySelectorAll() son API DOM disponibles en los navegadores web modernos. Se utilizan para consultar elementos DOM que coinciden con un selector específico.

La diferencia entre estos dos es que querySelector() devuelve un único elemento que coincide con sus criterios de selección. querySelectorAll() , por otro lado, devuelve todos los elementos que coinciden con los criterios de búsqueda en una lista iterable.

Sintaxis


this.template.querySelector('p'); // Selecciona el primer elemento del párrafo en el documento
this.template.querySelectorAll('p'); // Selecciona todos los elementos de párrafo en el documento
this.template.querySelectorAll('[objetivo]'); //Obtener todos los elementos que contienen el atributo objetivo

Enfoque de Campeón de Automatización (I-do):

Ahora tiene una comprensión básica de todos los ingredientes que necesitamos para construir el componente Lightning Web para el requisito comercial dado. Empecemos

lightningInputExample.js-meta.xml

Se puede utilizar un componente web lightning para crear páginas personalizadas para Lightning Experience y la aplicación móvil Salesforce rápidamente con herramientas de apuntar y hacer clic. Asegúrese de agregar el objetivo correcto para ello.

Este archivo de configuración de muestra hace que el componente esté disponible para todos los tipos de páginas Lightning.


<?versión xml="1.0" codificación="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadatos"> <apiVersion>54.0</apiVersion> <isExposed>verdadero</isExposed> <objetivos> <target>relámpago__RecordPage</target> <target>relámpago__AppPage</target> <objetivo>relámpago__Página de inicio</objetivo> </objetivos>
</LightningComponentBundle>

lightningInputExample.html

Cada componente de la interfaz de usuario debe tener un archivo HTML con la etiqueta raíz <plantilla> . La plantilla contiene dos etiquetas de entrada relámpago que crean entrada para correo electrónico y dispositivos móviles. La plantilla incluye un botón relámpago (Siguiente) con el método onclick handleNext .

Es posible usar atributos de elementos de datos en el componente de entrada de rayos para pasar detalles de correo electrónico y móvil a javascript para mayor lógica. Pero usaremos el evento onchange y almacenaremos los valores en variables en el controlador LWC.

Cuando un usuario hace clic en el botón Siguiente , llamará a un método JavaScript handleNext() que usará Variables para obtener los valores de los campos de correo electrónico y móvil.


<!-- EjemploEntradaRelámpago.html -->
<plantilla> <formulario> <div class="slds-p-top_small slds-p-bottom_medium slds-align_absolute-center slds-theme_default slds-text-heading_medium"> <b>Ejemplo de entrada Lightning</b></div> <div class="slds-box slds-theme_default"> <entrada de rayo escriba = "correo electrónico" label="Dirección de correo electrónico" valor = {valor de correo electrónico} onchange={handleEmailChange}> </relámpago-entrada> <entrada de rayo tipo = "tel" nombre="móvil" etiqueta="Móvil" valor={valor móvil} onchange={handleMobileChange}> </relámpago-entrada> <div class="slds-m-top_small slds-align_absolute-center"> <botón-relámpago variante="Neutro" etiqueta="Cancelar" clase="slds-m-izquierda_x-pequeña" onclick={manejarCancelar}> </botón-relámpago> <botón-relámpago variante="marca" clase="slds-m-izquierda_x-pequeña" etiqueta="Siguiente" onclick={manejarSiguiente}> </botón-relámpago> </div> </div> </formulario>
</plantilla>

lightningInputExample.js

Use variables del controlador LWC para obtener el correo electrónico y los valores móviles. La alerta mostrará el valor de correo electrónico y móvil al hacer clic en el botón Siguiente .


importar { LightningElement } desde 'lwc'; exportar clase predeterminada InputExample extiende LightningElement() { valoremail="nombredeusuario@ejemplo.com"; valor móvil = "000-000-0000"; handleEmailChange(evento){ this.emailvalue = event.target.value; } handleMobileChange(evento){ this.mobilevalue = event.target.value; } manejarSiguiente() { alert('email '+ this.emailvalue); alert('Móvil '+ este.valormóvil); }
}

Prueba de concepto

Evaluación formativa:

¡Quiero saber de ti!

¿Qué es una cosa que aprendiste de esta publicación? ¿Cómo imagina aplicar este nuevo conocimiento en el mundo real? Siéntase libre de compartir en los comentarios a continuación.

…

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://automationchampion.com/2022/06/16/pass-lightning-input-field-value-from-a-button-click-to-lightning-web-component-controller-2/