Eventos en React

Paso 4: Agregar los Eventos

En este cuarto paso transformaremos nuestra interfaz de pasiva a reactiva: algo que reacciona a las acciones del usuario.

En HTML tradicional sr utilizan atributos como onclick="..." o onsubmit="..." en minúsculas. En React/JSX, los eventos usan la convención camelCase (onClick, onSubmit, onChange) y en lugar de un texto con código, reciben directamente una función de JavaScript.

Código del Paso 4 (index.html)

Conceptos clave del Paso 4

  1. Paso de referencias: Las funciones que los eventos deben ejecutar, se asignan directamente a las funciones pero sin invocarlas: 🆗 onSubmit={handleSubmit} en lugar de ❌onSubmit={handleSubmit()} (lo cual es incorrecto porque se ejecutaría inmediatamente al renderizar).
  2. Synthetic Events: El objeto e que recibe la función manejadora (como e.preventDefault()) es un objeto envuelto por React llamado SyntheticEvent, el cual funciona exactamente igual en todos los navegadores.
  3. El paso que falta...: Si se escribes en el input o se hace clic en Eliminar, se podrán ver los mensajes en la consola y las alertas, pero la pantalla no cambia (no se agregan ni se borran tareas realmente). Esto se debe a que React no sabe que la interfaz debe volver a dibujarse.

Para solucionar esto se necesita manejar el Estado: en el paso 5.