Restablecer el campo de entrada Lightning al hacer clic en el botón en el componente web Lightning

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

Gran idea o pregunta duradera:

¿Cómo restablecer el campo de entrada de rayos a su valor predeterminado o nulo?

Objetivos:

Después de leer este blog, podrá:

Restablecer el valor del campo de entrada a su valor predeterminado
Restablecer el valor del campo de entrada a Nulo
y mucho más

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

Cómo implementar la representación condicional en el componente web Lightning
Obtener información sobre el usuario que inició sesión en el componente web Lightning

Rachel Gillett trabaja como desarrolladora junior en Gurukul on Cloud (GoC). Hasta ahora, ha creado este formulario y puede pasar el valor ingresado por el usuario a LWC javaScript.

Ahora quiere agregar un botón Cancelar que permita a los usuarios restablecer los valores de campo a su valor original , como se muestra a continuación:

requisitos previos

Lea primero este artículo y asegúrese de haber entendido querySelector() y querySelectorAll() .

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

Restablecer el valor del campo de entrada a nulo: uso del elemento de botón

Si usa un elemento de botón HTML dentro del formulario para realizar una acción como restablecer los valores de campo, especifique type="reset" . El uso de type=”reset” en un botón elimina los valores del formulario y no conserva los valores iniciales.

 <botón-relámpago
variante="Neutro"
etiqueta="Cancelar"
clase="slds-m-izquierda_x-pequeña"
tipo="restablecer" >
</botón-relámpago>

Este ejemplo crea un formulario con dos campos, seguidos de los botones Cancelar y Siguiente . Cuando hace clic en el botón Cancelar , restablece los valores y no conserva los valores iniciales.

Restablecer el valor del campo de entrada a nulo: utilizando el método Reset ()

El componente web Lightning no proporciona su propio Cancelar y Guardar . Para crear su propio botón Cancelar que revierte los valores de los campos, incluya un componente de botón relámpago que llame al método reset() .

 <botón-relámpago
variante="Neutro"
etiqueta="Cancelar"
clase="slds-m-izquierda_x-pequeña"
onclick={manejarCancelar} >
</botón-relámpago>

 importar { LightningElement, api } desde 'lwc';
exportar clase predeterminada InputExample extiende LightningElement() {
manejarCancelar(){ this.template.querySelector('formulario').reset(); }
}

Este ejemplo crea un formulario con dos campos, seguidos de los botones Cancelar y Siguiente . Cuando hace clic en el botón Cancelar , el método handleCancel restablece los campos a sus valores iniciales.

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.

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 dos botones de rayos . El primer botón ( Siguiente ) se usa para pasar el valor al componente de JavaScript, mientras que el segundo botón ( Cancelar ) se usa para restablecer los campos de entrada.

He agregado atributos de elementos de datos en el componente de entrada de rayos para obtener o establecer detalles de correo electrónico y móvil a/desde javascript para mayor lógica.

Cuando un usuario hace clic en el botón Cancelar , llamará a un método JavaScript handleCancel() que usará querySelector() para configurar el correo electrónico y el dispositivo móvil en su valor original.

lightningInputExample.js

Llame al método reset() en el controlador de JavaScript para restablecer el campo de entrada a su valor original. Para ello, utilizaremos querySelector().

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/17/reset-lightning-input-field-on-button-click-in-lightning-web-component/