Gestión de eventos: onClick y onChange

Objetivo: gestione clics y cambios de texto mediante los eventos sintéticos de React para obtener un comportamiento uniforme en distintos navegadores.

• onClick desencadena acciones
• onChange lee los valores de entrada
• El objeto de evento contiene los detalles

Asigne un controlador: onClick={handle}. Mantenga las funciones pequeñas; actualice el estado con setters (prefiera el actualizador funcional si utiliza el valor anterior).

onChange se activa cuando el usuario edita un campo de entrada. Lea el texto de event.target.value y mantenga el estado como fuente única de verdad.

Demo: incremente al hacer clic, refleje la entrada con onChange y evite que el envío del formulario recargue la página mediante event.preventDefault().

Los eventos sintéticos envuelven los eventos nativos para ofrecer uniformidad. Lea los valores dentro del controlador y mantenga los controladores breves y enfocados.

• Utilice event.preventDefault() en los formularios
• Utilice event.target.value para los campos de entrada

Consejos:

• No mute el DOM directamente; deje que el estado controle la interfaz.
• Evite incluir lógica compleja directamente en los controladores; llame a funciones pequeñas.
• Utilice el actualizador funcional cuando use el estado anterior.

Repaso: utilice onClick para las acciones y onChange para los campos de entrada; lea los valores de event.target.value; evite las recargas predeterminadas de los formularios cuando sea necesario.