Eventos en React

Los eventos hacen que tu web sea interactiva. Cuando alguien hace clic en un botón, escribe en un input, o pasa el mouse sobre algo, sucede algo. En React, manejar eventos es simple: solo necesitas una función y un atributo.

1. El Evento onClick (Clic)

El evento más común. Se dispara cuando alguien hace clic en un elemento.

export default function App() {
    // Función que se ejecuta al hacer clic
    const handleClick = () => {
        alert("¡Hiciste clic!");
    };

    return (
        <div>
            <button onClick={handleClick}>
                Haz clic
            </button>
        </div>
    );
}

2. Función Anónima en el Evento

A veces es más conveniente escribir la función directamente en el evento.

export default function App() {
    return (
        <div>
            <!-- Forma 1: Función anónima -->
            <button onClick={() => alert("¡Clic!")}>
                Botón 1
            </button>

            <!-- Forma 2: Función con lógica -->
            <button onClick={() => {
                console.log("Botón presionado");
                alert("Hola!");
            }}>
                Botón 2
            </button>
        </div>
    );
}

3. Acceder al Evento (Event Object)

React pasa automáticamente el objeto del evento a tu función.

export default function App() {
    const handleClick = (event) => {
        console.log(event); // Objeto del evento
        console.log(event.target); // El elemento que fue clickeado
        console.log(event.target.textContent); // El texto del botón
    };

    return (
        <button onClick={handleClick}>
            Haz clic
        </button>
    );
}

4. Eventos en Componentes

Puedes pasar funciones como props para que los componentes hijos ejecuten lógica del padre.

// Componente hijo que recibe una función como prop
function Boton({ texto, onClick }) {
    return (
        <button onClick={onClick}>
            {texto}
        </button>
    );
}

// Componente padre
export default function App() {
    const handleGuardar = () => {
        alert("¡Guardado!");
    };

    const handleEliminar = () => {
        alert("¡Eliminado!");
    };

    return (
        <div>
            <Boton texto="Guardar" onClick={handleGuardar} />
            <Boton texto="Eliminar" onClick={handleEliminar} />
        </div>
    );
}

5. Eventos Comunes

Los eventos más usados en React.

<button onClick={() => console.log("Clic")}>
    Botón
</button>

<input 
    onChange={(e) => console.log(e.target.value)} 
/>

<form onSubmit={(e) => {
    e.preventDefault();
    console.log("Formulario enviado");
}}>
    <button type="submit">Enviar</button>
</form>

<div
    onMouseEnter={() => console.log("Entraste")}
    onMouseLeave={() => console.log("Saliste")}
>
    Pasa el mouse
</div>

<input
    onFocus={() => console.log("Enfocado")}
    onBlur={() => console.log("Desenfocado")}
/>

<input
    onKeyDown={(e) => {
        if (e.key === "Enter") {
            console.log("Presionaste Enter");
        }
    }}
/>

6. Caso Práctico: Contador

Crea un contador que aumenta y disminuye al hacer clic.

import { useState } from 'react';

export default function Contador() {
    const [numero, setNumero] = useState(0);

    const aumentar = () => {
        setNumero(numero + 1);
    };

    const disminuir = () => {
        setNumero(numero - 1);
    };

    const reiniciar = () => {
        setNumero(0);
    };

    return (
        <div className="contador">
            <h1>{numero}</h1>
            <button onClick={aumentar}>+</button>
            <button onClick={disminuir}>-</button>
            <button onClick={reiniciar}>Reiniciar</button>
        </div>
    );
}

7. Caso Práctico: Formulario Simple

Crea un formulario que capture datos del usuario.

import { useState } from 'react';

export default function Formulario() {
    const [nombre, setNombre] = useState("");
    const [email, setEmail] = useState("");

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(f"Nombre: {nombre}, Email: {email}");
        // Aquí enviarías los datos a un servidor
        setNombre("");
        setEmail("");
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                placeholder="Nombre"
                value={nombre}
                onChange={(e) => setNombre(e.target.value)}
            />

            <input
                type="email"
                placeholder="Email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
            />

            <button type="submit">
                Enviar
            </button>
        </form>
    );
}

8. Caso Práctico: Lista de Tareas

Crea una lista donde puedas agregar y eliminar tareas.

import { useState } from 'react';

export default function ListaTareas() {
    const [tareas, setTareas] = useState([]);
    const [input, setInput] = useState("");

    const agregarTarea = () => {
        if (input.trim()) {
            setTareas([...tareas, { id: Date.now(), texto: input }]);
            setInput("");
        }
    };

    const eliminarTarea = (id) => {
        setTareas(tareas.filter((tarea) => tarea.id !== id));
    };

    return (
        <div>
            <h1>Mi Lista de Tareas</h1>

            <div>
                <input
                    type="text"
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                    placeholder="Nueva tarea..."
                />
                <button onClick={agregarTarea}>Agregar</button>
            </div>

            <ul>
                {tareas.map((tarea) => (
                    <li key={tarea.id}>
                        {tarea.texto}
                        <button onClick={() => eliminarTarea(tarea.id)}>
                            Eliminar
                        </button>
                    </li>
                ))}
            </ul>
        </div>
    );
}