Soy nuevo en Solid.js y estoy buscando una manera de agregar múltiples controladores de eventos al mismo elemento HTML desde diferentes componentes en JSX. Esto es fácil de hacer en Vue, pero parece que los eventos se anulan en Solid.js dependiendo de cómo se agregue el evento. Creé un ejemplo en ambos donde Vue se comporta de la manera que esperaría (agregando múltiples controladores de eventos), pero Solid anula los eventos dados si se proporciona más de uno para un solo evento.
Puede comparar comportamientos con este ejemplo alternando useDivAsComponent en Solid y useDivAsComponent en Vue . Vue se comporta igual independientemente de si se agregan múltiples controladores de eventos a un componente o elemento HTML. El comportamiento de Solid cambia dependiendo de si los eventos se agregan a un elemento HTML oa otro componente.
¿Hay alguna manera de agregar fácilmente múltiples controladores de eventos al mismo elemento HTML a través de diferentes componentes (definidos con JSX) en Solid?
Tengo un componente en el que me gustaría agregar controladores de eventos DOM al elemento raíz. Sin embargo, me gustaría que alguien que use ese componente también pueda agregar sus propios controladores de eventos DOM al componente.
Si el elemento raíz del componente es (props) => <div {...props} /> , solo se utilizan los controladores de eventos dentro del componente (si un usuario final del componente agrega los suyos, se anularán ) . Cuando observa el código construido de Solid, los accesorios se fusionan, por lo que tiene sentido que solo se mantenga el último controlador (esperaría que Solid usara addEventListener en su lugar).
Sin embargo, si el elemento raíz del componente es un <div /> regular, entonces Solid genera código donde se agregan controladores de eventos para que se mantengan ambos controladores de eventos . Si observa el código construido de Solid, Solid usa addEventListener() como era de esperar.
Como solución alternativa, podría pasar una referencia al componente interno ( <InnerComponent ref={ref} /> ) al padre y agregar manualmente detectores de eventos para evitar que se anulen eventos adicionales ( ref.addEventListener(...) ). Sin embargo, esto no es tan conveniente como otros marcos.
También podría asegurarme de que el componente interno donde se agregan los controladores de eventos sea un <div /> regular para que el compilador de Solid genere un código que agregue detectores de eventos en lugar de fusionar (y anular) los accesorios del controlador de eventos.
Me encantaría encontrar una manera de agregar múltiples eventos en JSX si es posible.