Aprender a escuchar las acciones del usuario es fundamental para construir aplicaciones interactivas con React. Cuando ya tienes tus componentes maquetados y con estilos, el siguiente paso es reaccionar a los eventos que disparan tus usuarios, ya sea un clic en un botón o escribir texto en un campo de búsqueda. React ofrece una forma elegante y sencilla de manejar estos eventos, diferente al HTML tradicional, usando una nomenclatura en CamelCase que simplifica el código.
¿Cómo funcionan los eventos con la nomenclatura de React?
En React, todas las propiedades de eventos comienzan con "on" seguido del nombre del evento en CamelCase [0:52]. Por ejemplo, onClick, onMouseEnter, onMouseLeave, onMouseMove. Esto difiere del HTML tradicional donde usarías onclick en minúsculas con un string de código. En React no enviamos un texto, sino una función que se ejecutará cuando ocurra la acción.
Un error común es escribir directamente el código que queremos ejecutar sin envolverlo en una función [2:09]. Si haces esto, el código se ejecutará inmediatamente cuando React renderice el componente, sin esperar a que el usuario interactúe. La solución es envolver siempre la lógica en una arrow function o referenciar una función ya definida.
¿Por qué debemos envolver el código en una función?
Cuando React monta y renderiza un componente, evalúa todo lo que encuentra en el JSX. Si colocas onClick={console.log('clic')}, JavaScript ejecuta ese console.log de inmediato [2:28]. En cambio, al escribir onClick={() => console.log('clic')}, le estás diciendo a React: guarda esta función y ejecútala solo cuando haya un clic.
Esta misma lógica aplica cuando tu función recibe parámetros. Si tienes una función onClickButton que acepta un argumento mensaje y necesitas pasarle ese argumento, debes envolverla nuevamente en una arrow function [3:50]:
jsx
const onClickButton = (mensaje) => {
alert(mensaje);
};
// Correcto
onClick={() => onClickButton('Aquí se debería abrir el modal')}
// Incorrecto - se ejecuta inmediatamente
onClick={onClickButton('Aquí se debería abrir el modal')}
Si tu función no recibe parámetros, puedes pasar directamente su nombre sin paréntesis: onClick={onClickButton} [3:08].
¿Cómo reutilizar funciones de eventos con props?
Una de las ventajas más poderosas de React es la capacidad de reutilizar funciones de eventos combinándolas con las props del componente [5:33]. En el componente TodoItem, se crearon dos funciones: onComplete y onDelete.
jsx
const onComplete = () => {
alert('Ya completaste el todo ' + props.text);
};
const onDelete = () => {
alert('Borraste el todo ' + props.text);
};
Cada TodoItem recibe un text diferente a través de sus props. Esto significa que con una sola función y un solo componente, puedes manejar los eventos de cualquier cantidad de todos sin duplicar código [6:17]. Al hacer clic en el check del segundo todo, la alerta muestra el texto correspondiente a ese elemento específico.
¿Cómo capturar lo que escribe el usuario con onChange?
Para el componente TodoSearch, el evento relevante no es onClick, sino onChange [7:23]. Este evento se dispara cada vez que el usuario modifica el contenido del input, es decir, con cada tecla que presiona.
El evento onChange recibe un parámetro especial llamado event, que React envía automáticamente como un SyntheticBaseEvent [8:15]. Este objeto contiene muchísimas propiedades, pero la más importante para capturar texto es event.target.value.
- event: el objeto completo del evento sintético de React.
- event.target: una referencia directa al elemento HTML del input en el navegador.
- event.target.value: el texto actual que el usuario ha escrito [9:00].
jsx
const onSearchValueChange = (event) => {
console.log(event.target.value);
};
<input onChange={onSearchValueChange} />
Lo interesante es que onChange no espera a que el usuario termine de escribir. Se ejecuta con cada carácter [9:22]. Si escribes "cebolla", la consola mostrará: "c", "ce", "ceb", "cebo", "cebol", "ceboll", "cebolla". Incluso registra correcciones y borrados. Esta capacidad será clave para filtrar los todos en el TodoList según lo que el usuario busque.
¿Qué patrones aplicar al definir eventos en React?
Algunas buenas prácticas que se desprenden de la clase:
- Separar la lógica del JSX: define tus funciones de evento fuera del return para mantener el código limpio [3:00].
- Nombrar funciones descriptivamente: usar nombres como
onClickButton, onComplete, onDelete u onSearchValueChange comunica claramente la intención.
- No llamar funciones con paréntesis en el JSX a menos que las envuelvas en otra arrow function.
- Aprovechar las props dentro de las funciones de evento para personalizar el comportamiento por componente.
Estos patrones permiten escalar la aplicación sin complicar el código. ¿Ya probaste a crear tus propios eventos personalizados en algún componente? Comparte tu experiencia en los comentarios.
