En Svelte podemos indicar funciones que se van a invocar cuando se desencadena un evento. Por ejemplo, para invocar a holaMundo
en el click
de un elemento podemos indicarlo como on:click={holaMundo}
En ocasiones se necesita pasar parámetros a esa función dentro de un componente de Svelte, pero no podemos indicarlo así:
on:click={holaMundo(parametro)}
Ya que eso ejecutará la función tan pronto se cargue el componente, y no esperará al clic. Por ello es que en este post te mostraré cómo pasar argumentos a las funciones en Svelte sin que se invoquen automáticamente.
Si quieres la solución rápida, mira lo siguiente. Para pasar argumentos, define una función anónima y dentro de esa función invoca a la verdadera función pasando el verdadero argumento. Así:
on:click={()=>{holaMundo(parametro)}}
Hay que separar las cosas. La definición de la función queda así: ()=>{holaMundo(parametro)}
Y estamos indicando esa función dentro del on:click={}
También podemos pasar el event
y el propio elemento del DOM, pero eso lo explicaré en otra sección más adelante.
En este y otros frameworks, se debe indicar la función que se va a invocar en el evento. Le debemos dar algo que se evalúe en una función o que básicamente sea del tipo function
.
Por ello es que si tenemos una función llamada holaMundo
, debemos indicarlo así:
on:click={holaMundo}
También es válido (pero no funcionará de la manera que se espera) usar paréntesis e invocar a la función, así:
on:click={holaMundo()}
Pero en ese caso lo que se haría es invocar a la función y Svelte esperaría que holaMundo regrese una función. Sí: se esperaría que al invocar a la función, la misma devuelva otra función que se ejecutaría al hacer clic.
Además, esa función sería invocada al inicio cuando el componente sea montado
En varias ocasiones es necesario obtener el elemento del DOM en donde se desencadenó el evento así como el evento en cuestión. En ese caso podemos hacerlo así:
on:change={(event) => {
onEstadoInputCambiado(event);
}}
Nota: aquí en lugar de click estoy escuchando el evento change
; recuerda que solo es para ejemplificar.
Lo importante es que estamos pasando el evento, y luego dentro de la función podemos acceder al mismo así como al elemento del DOM:
const onEstadoInputCambiado = async (event) => {
const propioElemento = event.target;
};
Tenemos al evento en event
y al elemento del DOM en event.target
.
Para finalizar veamos cómo pasar parámetros propios, más allá del evento y elemento HTML.
Yo tengo un conjunto de elementos input checkbox repetidos con each
, cuando se cambia el estado quiero invocar a una función y pasarle el elemento del each que en este caso sería elemento.terminado
.
Lo hago así:
{#each nota.elementos as elemento, indice}
<div class="flex items-center">
<input
type="checkbox"
on:change={(event) => {
onEstadoInputCambiado(event, elemento.terminado);
}}
/>
</div>
{/each}
Si la función no tiene parámetros, ejecútala así:
on:click={holaMundo}
Si quieres pasar parámetros:
on:click={()=>{holaMundo("parámetro 1", "parámetro 2")}}
Si quieres pasar el evento y argumentos:
on:click={(event)=>{holaMundo(evento, "parámetro 1", "parámetro 2")}}
Nota final: estoy usando parámetros y argumentos como sinónimos.
El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…
En este post te voy a enseñar a designar una carpeta para imprimir todos los…
En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…
Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…
Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…
Hoy voy a enseñarte cómo imprimir el € en una impresora térmica. Vamos a ver…
Esta web usa cookies.