@composi/core:

Eventos

Eventos en Línea

Puede hacer que los usuarios pueden interactuar con los componentes a través de eventos en línea. También es posible utilizar escuchas de eventos, especialmente para configurar eventos delegados. Deberá leer la documentación de Enganches del Ciclo de Vida para obtener detalles sobre cómo hacerlo.

Los eventos en línea de Composi son como los eventos en línea normales de JavaScript. No hay que usar letra de camello como React. Deben estar en minúsculas. En el caso de que se usa un evento en línea con letra de camello accidentalmente, Composi lo convertirá automáticamente a minúsculas.

See the Pen @composi/core - Eventos-1 by Robert Biggs (@rbiggs) on CodePen.

Ejemplo

Hagamos una lista interactiva. Vamos a definir una función manejaClic y usarla en un evento de clic en línea en los elementos de la lista. Para que esto funcione, tendremos que pasar el controlador de clic al componente secundario. Además, dáte cuenta cómo pasamos los valores dentro del bucle de renderización al controlador de clic. Esto proporciona el valor que utilizará el controlador de evento anunciar.

See the Pen @composi/core - Eventos-2 by Robert Biggs (@rbiggs) on CodePen.

Delegación de Eventos

Cuando tiene una lista larga, tener eventos en cada ítem de la lista usa mucha memoria. La delegación de eventos nos permite usar solo un evento para manejar eventos de clic en todos los ítemes secundarios. Entonces, rehaceremos el ejemplo anterior para usar la delegación de eventos. Hacemos esto registrando el evento en la lista y pasándole el objeto de evento. Con el gestón de eventos, verificamos para ver cuál es la targeta del evento. Si el nodeName de la targeta del evento es LI, obtenemos el el contenido textual de ese ítem de la lista. Entonces anunciamos ese valor. La técnica es muy simple, en realidad.

See the Pen @composi/core - Eventos-3 by Robert Biggs (@rbiggs) on CodePen.

Usar la delegación de eventos en una lista significa que podemos agregar y eliminar ítemes de la lista sin preocuparnos por cuantos eventos hayan. Cuando un componente tiene muchos componentes secundarios anidados y está intentando capturar el evento en uno de ellos, el evento tiene que viajar desde donde ocurrió hasta donde lo está escuchando. Por lo tanto, es mejor registrar el evento delegado lo más cerca posible del lugar donde desea interceptar el evento. De lo contrario, un viaje largo puede resultar en un tiempo de demora desde la ocurrencia del evento hasta la ejecución.

Gestor de Evento

Queríamos llamarle la atención a un detalle sobre cómo se manejan los eventos en línea. Si tiene un controlador de eventos que no espera ningún argumento, puede usar solo su nombre, no es necesaria ninguna función o paréntesis:

// Evento sin argumento:
function Botón() {
  // Este gestor de evento no recibe argumento cualquiera:
  function anuciarClic() {
    alert('¡Acabas de dar clic!')
  }
  return <button onclick={anuciarClic}>Clic</button>
}

Los eventos en línea que se usan así reciben el objeto de evento automáticamente. Por eso prodrías hacer lo siguiente:

function Botón() {
  // Puedes acceder al objeto del evento así:
  function anuciarClic(e) {
    alert('Diste clic en un botón con este texto: ${e.target.textContent}.')
  }
  return <button onclick={anuciarClic}>Clic</button>
}

Aquí usamos una function de flecha con onclick:

return <button onclick={() => anuciarClic()}>Clic</button>

Date cuenta que no es necesario usar una función de flecha con un gestor de evento cuando este no tiene argumento.

Gestor de Evento con Argumento

Si necesitas pasar un argumento al gestor de evento, tendrás que usar una función de flecha. Nota cómo lo hacemos en este ejemplo:

let count = 0
function Contador({data}) {
  function aumentarCuenta(count) {
    render(<Contador data={count++}/>, 'section')
  }
  return (
    <button onclick={data => aumentarCuenta(data)}>{data}</button>
  )
}
render(<Contador data={count}/> 'section')

No Hay this

Como @composi/core solo proporciona componentes funcionales, nunca debe preocuparse por el ámbito de los eventos. Porque los componentes son funciones, no hay this y, por lo tanto, no es necesario utilizar bind u otras técnicas para preservar el ámbito del gestor de evento. Por supuesto, para funcionar, un gestor de evento debe estar en el mismo ámbito que el código que lo utiliza. Nos gusta definir los gestores de evento dentro del componente funcional antes de la declaración de retorno. De esa manera, se encapsulan en el componente mismo como propiedades privadas y están disponibles para los gestores de evento registrados en los elementos del componente.