Skip to content

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?

  1. Cómo implementar la representación condicional en el componente web Lightning
  2. 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() .

  1. 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/

Últimas novedades 
de EGA Futura
1954
Desde hace más de 25 años potenciamos a las Empresas de Iberoamérica

🎬 Video de Juan Manuel Garrido » Claves para tu Productividad diaria 🙌✅

🎬 Video de EGA Futura » Facturación Electrónica en Uruguay » Conceptos básicos con EGA Futura Windows

🎬 Video de EGA Futura » Facturación Electrónica en Uruguay » Configuración de EGA Futura Windows

🎬 Video de EGA Futura » Facturación Electrónica en Uruguay » Funcionamiento con EGA Futura Windows

🎬 Video de EGA Futura » Configuración de la Plataforma EGA Futura

🎬 Video de EGA Futura » Configuración de usuario en EGA Futura

🎬 Video de EGA Futura » Como automatizar la publicación en Redes Sociales?

🎬 Video de Juan Manuel Garrido » Cómo restaurar la configuración de fábrica de EGA Futura Windows sin perder la información

🎬 Video de Juan Manuel Garrido » Factura electrónica: Prueba de Factura Electronica previa a la activacion

🎬 Video de EGA Futura » Como se registran los Beneficios de cada Empleado en la base de datos de EGA Futura

🎬 Video de EGA Futura » EGA Futura Time Clock » Reloj de Control horario y asistencia

🎬 Video de EGA Futura » Como registrar Observaciones en un Empleado dentro de EGA Futura People?

🎬 Video de EGA Futura » Cómo registrar la Educación de cada Empleado en EGA Futura People?

🎬 Video de EGA Futura » Como hacer la Desvinculación de un Empleado? (Offboarding)

🎬 Video de EGA Futura » Como registrar Habilidades o Skills de empleados dentro de EGA Futura

🎬 Video de EGA Futura » Como hacer el Onboarding o Proceso de Incorporación de un Empleado?

🎬 Video de EGA Futura » Cómo administrar Turno de trabajo dentro de EGA Futura

🎬 Video de EGA Futura » Que es un Ticket interno dentro de la Plataforma EGA Futura

🎬 Video de EGA Futura » Que son los Entrenamientos de Empleado en EGA Futura people?

🎬 Video de EGA Futura » Qué son los Epics dentro de EGA Futura

🎬 Video de EGA Futura » Qué es EGA Futura People?

🎬 Video de EGA Futura » EGA Futura People » Asistencias

🎬 Video de EGA Futura » Soporte EGA Futura » Software de Gestión Windows vs Software de Gestión Nube 🤩

🎬 Video de EGA Futura » ツ Comparando un Objeto con un Fichero

🎬 Video de EGA Futura » ✍( ͡* ͜ʖ ͡*) ¿Qué es una Aplicación?

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