Eventos personalizados entre componentes React

Contenido del curso

No sé dónde empezar

Introducción a SolidJS

Reactividad a profundidad

Renderizado en Solid

Reactividad en Listas

Componentes

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:51

Eventos personalizados entre componentes React

Curso de SolidJS

Clase 24 de 27

Clase 24 / 27

Recursos

Cuando un componente hijo intenta ejecutar una función que vive en el padre, React lanza un error en consola. La solución elegante pasa por eventos personalizados como props, un patrón que mantiene la arquitectura limpia y delega la lógica de estado a quien debe manejarla: el componente padre.

¿Por qué delegar el cambio de estado al componente padre?

El estado general de una aplicación, como la lista de to do's, pertenece al componente padre. Si el hijo intenta modificar ese estado directamente, rompes el principio de responsabilidad y terminas pasando funciones gigantes por props.

La alternativa más limpia es que el hijo dispare eventos y el padre decida qué hacer con ellos. Así, cada componente se concentra en su trabajo: el hijo notifica, el padre actualiza.

¿Qué son los eventos personalizados en React? Son props con prefijo on que reciben una función. El componente hijo las ejecuta cuando ocurre algo internamente, y el padre define la lógica que debe correr.

¿Cómo creo un evento onInputChange en un componente hijo?

La convención dicta que cualquier evento empiece con on, igual que onClick, onChange o onBlur en HTML. Esta práctica viene de frameworks como Bootstrap o Material UI, que exponen componentes JSX con eventos muy personalizados.

En el componente hijo recibes el evento como prop y lo disparas dentro del onChange real del input:

jsx function TodoItem({ onInputChange, onTextChange, onRemove, index, todo }) { return ( <input type="checkbox" onChange={onInputChange} /> ); }

En el padre, defines la lógica del setter y la pasas como función al hijo. El resultado es un componente que delega el evento interno del input al padre y deja la mutación del estado donde corresponde.

¿Cómo paso datos del hijo al padre con onTextChange?

Cuando el evento necesita información extra, como el texto editado, el hijo invoca la función pasándole ese valor como argumento. El padre lo recibe y actualiza el estado con produce de Immer.

onInputChange: cambia el estado completed del to do al hacer clic en el checkbox.
onTextChange: recibe el texto editado y lo escribe en el índice correspondiente.
onRemove: ejecuta removeTodo con el índice para hacer un splice del elemento.

El onBlur del modo editable cumple doble función: quita la edición del elemento y dispara onTextChange para guardar el cambio. Ahí ves la potencia de la composición funcional: encadenas comportamientos sin acoplar componentes.

¿Cuándo uso onRemove en lugar de llamar a la función directa? Siempre que la acción modifique el estado global. El hijo emite el evento, el padre ejecuta removeTodo(index) y el árbol se mantiene desacoplado.

¿Cómo conecto onRemove desde App.jsx?

En App.jsx, donde renderizas la lista, defines el evento como una función inline que recibe el índice del elemento actual:

jsx <TodoItem onInputChange={() => setTodos(/* lógica /)} onTextChange={(text) => setTodos(/ lógica con text */)} onRemove={() => removeTodo(index)} />

Al refrescar la app, todo sigue funcionando: agregas elementos, cambias su estado completed, editas textos con contentEditable y eliminas ítems. La propiedad derivada con useMemo continúa contando correctamente los elementos completados.

¿Qué falta para que la app guarde datos del usuario?

Ahora mismo, si cambias el dark mode, marcas tareas como completadas o agregas nuevos to do's y refrescas, todo se pierde. El estado vive solo en memoria.

La solución viene en la próxima clase con localStorage, una API del navegador que persiste datos entre sesiones. Vas a aprender a sincronizar el estado de React con el almacenamiento local para que la experiencia del usuario se mantenga al recargar.

¿Ya identificaste en tu propio proyecto qué eventos personalizados podrías crear para limpiar la comunicación entre componentes? Cuéntame en los comentarios cómo estás manejando el flujo de datos en tu app.

Resumen

¿Por qué delegar el cambio de estado al componente padre?

La alternativa más limpia es que el hijo dispare eventos y el padre decida qué hacer con ellos. Así, cada componente se concentra en su trabajo: el hijo notifica, el padre actualiza.

¿Qué son los eventos personalizados en React? Son props con prefijo on que reciben una función. El componente hijo las ejecuta cuando ocurre algo internamente, y el padre define la lógica que debe correr.

¿Cómo creo un evento onInputChange en un componente hijo?

En el componente hijo recibes el evento como prop y lo disparas dentro del onChange real del input:

jsx function TodoItem({ onInputChange, onTextChange, onRemove, index, todo }) { return ( <input type="checkbox" onChange={onInputChange} /> ); }

¿Cómo paso datos del hijo al padre con onTextChange?

Cuando el evento necesita información extra, como el texto editado, el hijo invoca la función pasándole ese valor como argumento. El padre lo recibe y actualiza el estado con produce de Immer.

onInputChange: cambia el estado completed del to do al hacer clic en el checkbox.
onTextChange: recibe el texto editado y lo escribe en el índice correspondiente.
onRemove: ejecuta removeTodo con el índice para hacer un splice del elemento.

¿Cuándo uso onRemove en lugar de llamar a la función directa? Siempre que la acción modifique el estado global. El hijo emite el evento, el padre ejecuta removeTodo(index) y el árbol se mantiene desacoplado.

¿Cómo conecto onRemove desde App.jsx?

En App.jsx, donde renderizas la lista, defines el evento como una función inline que recibe el índice del elemento actual:

jsx <TodoItem onInputChange={() => setTodos(/* lógica /)} onTextChange={(text) => setTodos(/ lógica con text */)} onRemove={() => removeTodo(index)} />

¿Qué falta para que la app guarde datos del usuario?

Ahora mismo, si cambias el dark mode, marcas tareas como completadas o agregas nuevos to do's y refrescas, todo se pierde. El estado vive solo en memoria.

Introducción a SolidJS

SolidJS vs React: reactividad granular explicada

Python para Principiantes: Fundamentos y Aplicaciones Básicas

Signals en SolidJS: crea datos reactivos

createEffect y side effects en SolidJS

Signals derivados vs createMemo en Solid

Reactividad a profundidad

Qué es la reactividad en Solid

Creación de una Librería Reactiva MiniSolid desde Cero

Implementación de Signals en Librería Reactiva Solid

Cómo createEffect conecta signals y efectos

Señales derivadas sin nuevas primitivas

createMemo para evitar renderizados innecesarios

Cómo Solid convierte JSX al DOM real

Renderizado en Solid

Configurando SolidJS con Tailwind para Todo App

Dark mode en SolidJS con signals

Renderizado Condicional en Solid: Técnicas y Optimización

Renderizado de listas reactivas con For en Solid

Manejo de Eventos en Elementos HTML con SolidJS

Reactividad en Listas

Optimización de Renderizado y Reactividad en Listas con SolidJS

Cómo funcionan los stores en Solid JS

Stores de SolidJS para datos complejos

Función produce para mutar stores en Solid

Componentes

Qué son los componentes en Solid

Comunicación padre-hijo con props en SolidJS

Eventos personalizados entre componentes React

Persistencia con localStorage y useEffect

Deploy de app Solid en Netlify

Solid y el futuro del desarrollo web

Eventos personalizados entre componentes React