El manejo de eventos en React le permite responder a las interacciones del usuario, como clics, envíos de formularios y otros eventos. A continuación se ofrece una descripción general básica y un ejemplo:

Conceptos básicos

1. Enlace de eventos: En React, normalmente usas camelCase para los nombres de eventos (por ejemplo, onClick, onChange).
2. Manejo de eventos: Puede pasar una función como controlador de eventos directamente en JSX.
3. Eventos sintéticos: React envuelve los eventos nativos en un evento sintético para garantizar la compatibilidad entre navegadores.

Ejemplo

Aquí hay un ejemplo sencillo de cómo manejar un clic en un botón y un cambio de entrada:

import React, { useState } from 'react';

const EventHandlingExample = () => {
  const [inputValue, setInputValue] = useState('');

  const handleClick = () => {
    alert(`Button clicked! Input value: ${inputValue}`);
  };

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    

      
      Click Me
    
  );
};

export default EventHandlingExample;

Puntos clave

• Gestión de estado: utilice useState para gestionar el estado en componentes funcionales.
• Objeto de evento: el controlador de eventos recibe un objeto de evento que contiene información sobre el evento.
• Prevenir valor predeterminado: use event.preventDefault() para evitar el comportamiento predeterminado de eventos (como envíos de formularios).

¡No dudes en preguntar si necesitas ejemplos específicos o explicaciones adicionales!