Hacer que una aplicación React reaccione a las acciones de quien la usa empieza por escuchar eventos en React JS con atributos como onClick y onChange. Sin esa capa, tu interfaz luce bien pero permanece inerte: los botones no responden, los inputs no filtran y la lista de tareas no se actualiza.

Aquí verás cómo capturar clics, lecturas de teclado y datos del input para preparar el terreno hacia el manejo de estado.

¿Cómo se diferencia onClick en React de onclick en HTML?

En HTML clásico, onclick va en minúsculas y recibe un string con código JavaScript. En React, la sintaxis cambia: se escribe en camelCase y recibe una función dentro de llaves.

React toma cualquier atributo que empiece con on (como onClick, onChange, onScroll) y lo traduce internamente a un addEventListener de JavaScript [02:30]. Por eso, si inspeccionas el botón en el DOM, no verás un atributo onclick visible: el escuchador vive en los event listeners del navegador.

¿Por qué onClick va en camelCase en React? Porque React procesa cualquier prop que empiece con on y la convierte en un addEventListener. La convención camelCase permite distinguir eventos de atributos HTML normales.

¿Por qué hay que envolver el código en una función?

No puedes pasar directamente un console.log('le diste clic') dentro de las llaves. Si lo haces así, el código se ejecuta cuando el componente se renderiza, no cuando el usuario interactúa.

La solución es encapsular la lógica en una arrow function para entregársela a React y que él decida cuándo ejecutarla:

jsx <button className="create-todo-button" onClick={() => { console.log('le diste clic'); }}

</button>

Así, React solo dispara la función cuando el usuario hace clic real sobre el botón [03:45].

¿Qué información trae el parámetro event en React?

Cada función de evento recibe un parámetro especial: el event. Al imprimirlo en consola aparece como un SyntheticBaseEvent, una versión que React envuelve sobre el evento nativo del navegador.

Entre sus propiedades destacan:

• type: el tipo de evento, por ejemplo click o change.
• target: el nodo HTML desde el cual se disparó el evento.
• Información adicional sobre coordenadas, teclas presionadas o el estado del DOM.

La propiedad target es de las más usadas porque te da acceso directo al elemento HTML, como si lo hubieras seleccionado con manipulación tradicional del DOM [05:50]. Desde ahí puedes leer clases, contenido interno o cualquier atributo.

¿Cómo capturar el texto de un input con onChange?

El evento onChange es la pieza clave para inputs y campos de búsqueda. Funciona igual que onClick: recibe una función que React ejecuta cada vez que el contenido del input cambia.

En el componente TodoSearch, el código queda así:

jsx <input placeholder="Cortar cebolla" onChange={(event) => { console.log('Escribiste en el TodoSearch'); console.log(event.target.value); }} />

La propiedad event.target.value devuelve el texto actual del input. Si el usuario escribe "cortar", React dispara un evento por cada letra: primero c, luego co, después cor, hasta cortar. Incluso detecta cuando se borra un carácter [08:20].

¿Qué hace event.target.value en React? Devuelve el valor actual del elemento que disparó el evento. En un input, equivale al texto que el usuario tiene escrito en ese momento exacto.

¿Para qué sirve capturar cada cambio en tiempo real?

Este comportamiento de captura por tecla es lo que permite construir buscadores en vivo. Cada pulsación se traduce en información que tu aplicación puede usar para filtrar la lista de tareas sin esperar a que el usuario presione Enter o un botón de buscar.

Es el mismo principio que aplican autocompletadores y filtros instantáneos en interfaces modernas.

¿Qué eventos comunes puedes escuchar en React?

React soporta prácticamente cualquier evento del DOM. Algunos de los más usados:

• onClick: clics sobre botones, enlaces o cualquier elemento interactivo.
• onChange: cambios en inputs, selects y textareas.
• onSubmit: envío de formularios.
• onScroll: desplazamiento dentro de un contenedor.
• onMouseEnter y onMouseLeave: paso del cursor sobre un elemento.

Todos siguen la misma regla: camelCase, función dentro de llaves y acceso al objeto event como parámetro.

Con esto ya puedes detectar interacciones, pero todavía falta el siguiente paso: comunicar esa información entre componentes para que, por ejemplo, la lista de tareas se filtre según lo que se escribe en el buscador. Esa pieza se llama estado y es lo que abre la puerta a aplicaciones verdaderamente reactivas.

¿Cómo planeas usar onChange en tu propio proyecto? Cuéntame en los comentarios qué tipo de interacción quieres construir primero.