11.1-eventos

 

Tutorial Sencillo de Eventos en React-Ejemplo 1: Eventos de Click Básico

Componente Padre: App.js

function App() {

  return (

    <div>

      <h1>Eventos de Click</h1>

      <EjemploClick />

    </div>

  );

}

Componente Hijo: EjemploClick.js

import { useState } from 'react';


function EjemploClick() {

  const [contador, setContador] = useState(0);

  const [texto, setTexto] = useState('Haz click');


  function handleClick() {

    setTexto('¡Click!');

    setContador(contador + 1);

  }


  function resetear() {

    setContador(0);

    setTexto('Haz click');

  }

  return (

    <div style={{padding: '10px', border: '1px solid gray'}}>

      <h3>Contador: {contador}</h3>

      

      <button onClick={handleClick} style={{margin: '5px'}}>

        {texto}

      </button>

      <button onClick={resetear} style={{margin: '5px'}}>

        Resetear

      </button>

      <button onClick={() => setTexto('Click directo')} style={{margin: '5px'}}>

        Cambiar texto

      </button>

    </div> );}

Ejemplo 2: Formulario Simple

Componente Padre: App.js

jsx

function App() {

  return (

    <div>

      <h1>Formularios</h1>

      <FormularioSimple />

    </div>

  );

}

Componente Hijo: FormularioSimple.js

jsx

import { useState } from 'react';


function FormularioSimple() {

  const [nombre, setNombre] = useState('');

  const [email, setEmail] = useState('');

  const [mensaje, setMensaje] = useState('');


  function handleSubmit(e) {

    e.preventDefault(); // Evita que se recargue la página

    setMensaje(`Enviado: ${nombre} (${email})`);

    

    // Limpiar campos

    setNombre('');

    setEmail('');

  }


  function handleReset() {

    setNombre('');

    setEmail('');

    setMensaje('');

  }


 




 return (

    <div style={{padding: '10px', border: '1px solid gray'}}>

      <form onSubmit={handleSubmit}>

        <div style={{margin: '10px 0'}}>

          <input

            type="text"

            value={nombre}

            onChange={(e) => setNombre(e.target.value)}

            placeholder="Tu nombre"

            style={{padding: '5px'}}

          />

        </div>

        

        <div style={{margin: '10px 0'}}>

          <input

            type="email"

            value={email}

            onChange={(e) => setEmail(e.target.value)}

            placeholder="Tu email"

            style={{padding: '5px'}}

          />

        </div>

        

        <button type="submit" style={{margin: '5px'}}>Enviar</button>

        <button type="button" onClick={handleReset} style={{margin: '5px'}}>Limpiar</button>

      </form>

      

      {mensaje && <p><strong>{mensaje}</strong></p>}

    </div>

  );

}




Ejemplo 3: Eventos de Teclado-Componente Padre: App.js

function App() {

  return (

    <div>

      <h1>Eventos de Teclado</h1>

      <EventosTeclado />

    </div>

  );

}

Componente Hijo: EventosTeclado.js

import { useState } from 'react';


function EventosTeclado() {

  const [texto, setTexto] = useState('');

  const [ultimaTecla, setUltimaTecla] = useState('');


  function handleKeyDown(e) {

    setUltimaTecla(e.key);

    

    if (e.key === 'Enter') {

      setTexto(texto + '[Enter] ');

    }

    

    if (e.key === 'Escape') {

      setTexto('');

    }

  }


  function limpiar() {

    setTexto('');

    setUltimaTecla('');

  }


  return (

    <div style={{padding: '10px', border: '1px solid gray'}}>

      <textarea

        value={texto}

        onChange={(e) => setTexto(e.target.value)}

        onKeyDown={handleKeyDown}

        placeholder="Escribe aquí..."

        style={{width: '300px', height: '100px', padding: '5px'}}

      />

      <div style={{marginTop: '10px'}}>

        <button onClick={limpiar}>Limpiar</button>

      </div>

      <div style={{marginTop: '10px'}}>

        <p>Última tecla: <strong>{ultimaTecla || 'ninguna'}</strong></p>

        <p>Caracteres: <strong>{texto.length}</strong></p>

      </div>

    </div>

  );

}

Ejemplo 4: Eventos de Mouse

Componente Padre: App.js

jsx

function App() {

  return (

    <div>

      <h1>Eventos de Mouse</h1>

      <EventosMouse />

    </div>

  );

}

Componente Hijo: EventosMouse.js

jsx

import { useState } from 'react';


function EventosMouse() {

  const [clicks, setClicks] = useState(0);

  const [mouseDentro, setMouseDentro] = useState(false);


  function handleClick() {

    setClicks(clicks + 1);

  }


  function handleMouseEnter() {

    setMouseDentro(true);

  }


  function handleMouseLeave() {

    setMouseDentro(false);

  }


  function resetear() {

    setClicks(0);

  }


  return (

    <div style={{padding: '10px', border: '1px solid gray'}}>

      <div

        onClick={handleClick}

        onMouseEnter={handleMouseEnter}

        onMouseLeave={handleMouseLeave}

        onDoubleClick={resetear}

        style={{

          width: '200px',

          height: '100px',

          border: '2px solid blue',

          backgroundColor: mouseDentro ? 'lightblue' : 'white',

          margin: '10px 0',

          padding: '10px',

          textAlign: 'center',

          cursor: 'pointer'

        }}

      >

        <h3>Área Interactiva</h3>

        <p>Haz click aquí</p>

      </div>

      

      <div>

        <p>Clicks: <strong>{clicks}</strong></p>

        <p>Mouse dentro: <strong>{mouseDentro ? 'Sí' : 'No'}</strong></p>

      </div>

    </div>

  );

}



Ejemplo 5: Lista de Tareas (Todo List)

Componente Padre: App.js

jsx

function App() {

  return (

    <div>

      <h1>Lista de Tareas</h1>

      <TodoList />

    </div>

  );

}

Componente Hijo: TodoList.js

jsx

import { useState } from 'react';


function TodoList() {

  const [tareas, setTareas] = useState([]);

  const [nuevaTarea, setNuevaTarea] = useState('');


  function agregarTarea(e) {

    e.preventDefault();

    

    if (nuevaTarea.trim() === '') return;

    

    setTareas([...tareas, {

      id: Date.now(),

      texto: nuevaTarea,

      completada: false

    }]);

    

    setNuevaTarea('');

  }


  function eliminarTarea(id) {

    setTareas(tareas.filter(tarea => tarea.id !== id));

  }


  function toggleCompletada(id) {

    setTareas(tareas.map(tarea => {

      if (tarea.id === id) {

        return { ...tarea, completada: !tarea.completada };

      }

      return tarea;

    }));

  }


  function limpiarTodas() {

    setTareas([]);

  }


  return (

    <div style={{padding: '10px', border: '1px solid gray'}}>

      <form onSubmit={agregarTarea}>

        <input

          type="text"

          value={nuevaTarea}

          onChange={(e) => setNuevaTarea(e.target.value)}

          placeholder="Nueva tarea..."

          style={{padding: '5px', marginRight: '5px'}}

        />

        <button type="submit">Agregar</button>

      </form>

      

      <div style={{marginTop: '10px'}}>

        {tareas.length === 0 ? (

          <p>No hay tareas</p>

        ) : (

          <ul style={{listStyle: 'none', padding: 0}}>

            {tareas.map(tarea => (

              <li key={tarea.id} style={{margin: '5px 0'}}>

                <input

                  type="checkbox"

                  checked={tarea.completada}

                  onChange={() => toggleCompletada(tarea.id)}

                  style={{marginRight: '10px'}}

                />

                

                <span style={{

                  textDecoration: tarea.completada ? 'line-through' : 'none'

                }}>

                  {tarea.texto}

                </span>

                

                <button

                  onClick={() => eliminarTarea(tarea.id)}

                  style={{marginLeft: '10px'}}

                >

                  Eliminar

                </button>

              </li>

            ))}

          </ul>

        )}

      </div>

      

      {tareas.length > 0 && (

        <button onClick={limpiarTodas} style={{marginTop: '10px'}}>

          Limpiar todas

        </button>

      )}

      

      <div style={{marginTop: '10px'}}>

        <p>Tareas: {tareas.length}</p>

        <p>Completadas: {tareas.filter(t => t.completada).length}</p>

      </div>

    </div>

  );

}







Ejemplo 6: Componente Reutilizable con Eventos

Componente Padre: App.js

function App() {

  const productos = [

    { id: 1, nombre: "Laptop", precio: 800 },

    { id: 2, nombre: "Mouse", precio: 25 },

    { id: 3, nombre: "Teclado", precio: 50 }

  ];


  function manejarCompra(producto) {

    alert(`Comprado: ${producto.nombre} - $${producto.precio}`);

  }


  return (

    <div>

      <h1>Tienda</h1>

      {productos.map(producto => (

        <Producto

          key={producto.id}

          producto={producto}

          onCompra={manejarCompra}

        />

      ))}

    </div>

  );

}

Componente Hijo: Producto.js

function Producto({ producto, onCompra }) {

  return (

    <div style={{

      border: '1px solid #ccc',

      padding: '10px',

      margin: '10px 0'

    }}>

      <h3>{producto.nombre}</h3>

      <p>Precio: ${producto.precio}</p>

      <button onClick={() => onCompra(producto)}>

        Comprar

      </button>

    </div>  );}

Ejemplo 7: Eventos con Parámetros

Componente Padre: App.js

jsx

function App() {

  function saludar(nombre) {

    alert(`¡Hola ${nombre}!`);

  }


  return (

    <div>

      <h1>Saludos</h1>

      <button onClick={() => saludar('Juan')}>

        Saludo a Juan

      </button>

      

      <button onClick={() => saludar('María')}>

        Saludo a María

      </button>

      

      <button onClick={() => saludar('Pedro')}>

        Saludo a Pedro

      </button>

    </div>

  );

}






Ejemplo 8: Select y Checkbox-Componente Padre: App.js

function App() {

  return (

    <div>

      <h1>Select y Checkbox</h1>

      <SelectCheckbox />

    </div>

  );

}

Componente Hijo: SelectCheckbox.js

jsx

import { useState } from 'react';


function SelectCheckbox() {

  const [opcion, setOpcion] = useState('opcion1');

  const [acepto, setAcepto] = useState(false);


  function manejarSubmit(e) {

    e.preventDefault();

    alert(`Opción: ${opcion}, Aceptado: ${acepto}`);

  }


  return (

    <div style={{padding: '10px', border: '1px solid gray'}}>

      <form onSubmit={manejarSubmit}>

        <div style={{margin: '10px 0'}}>

          <select 

            value={opcion} 

            onChange={(e) => setOpcion(e.target.value)}

            style={{padding: '5px'}}

          >

            <option value="opcion1">Opción 1</option>

            <option value="opcion2">Opción 2</option>

            <option value="opcion3">Opción 3</option>

          </select>

        </div>

        

        <div style={{margin: '10px 0'}}>

          <label>

            <input

              type="checkbox"

              checked={acepto}

              onChange={(e) => setAcepto(e.target.checked)}

              style={{marginRight: '5px'}}

            />

            Acepto los términos

          </label>

        </div>

        

        <button type="submit">Enviar</button>

      </form>

      

      <div style={{marginTop: '10px'}}>

        <p>Opción seleccionada: <strong>{opcion}</strong></p>

        <p>Aceptado: <strong>{acepto ? 'Sí' : 'No'}</strong></p>

      </div>

    </div>

  );

}

Resumen de Eventos

jsx

// 1. Click básico

<button onClick={funcion}>Click</button>


// 2. Click con parámetro (usar arrow function)

<button onClick={() => funcion(parametro)}>Click</button>


// 3. Cambio en input

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


// 4. Formulario

<form onSubmit={(e) => {

  e.preventDefault();

  // tu código

}}>


// 5. Teclado

<input onKeyDown={(e) => {

  if (e.key === 'Enter') {

    // tu código

  }

}} />


// 6. Mouse

<div

  onClick={handleClick}

  onMouseEnter={handleMouseEnter}

  onMouseLeave={handleMouseLeave}

>


// 7. No hacer esto (ejecuta función al renderizar)

<button onClick={funcion()}>MAL</button>


// 8. Esto es correcto

<button onClick={funcion}>BIEN</button>

<button onClick={() => funcion(parametro)}>BIEN</button>

App Completa con Todos los Ejemplos

jsx

function App() {

  return (

    <div style={{padding: '20px'}}>

      <h1>Tutorial de Eventos en React</h1>

      

      <EjemploClick />

      <hr />

      

      <FormularioSimple />

      <hr />

      

      <EventosTeclado />

      <hr />

      

      <EventosMouse />

      <hr />

      

      <TodoList />

      <hr />

      

      <SelectCheckbox />

    </div>

  );

}

Este tutorial simplificado muestra los eventos más importantes en React con ejemplos claros y concisos. Cada ejemplo tiene su propio componente padre e hijo separados para mejor organización.

Comentarios

Publicar un comentario

Entradas más populares de este blog

9.3-Tutorial de Componentes React con Props -SSS

  Tutorial Sencillo de Componentes React con Props Ejemplo 1: Componente Saludo (simple) Componente Padre: App.js jsx function App () {    return (      < div >        < Saludo nombre = "Ana" edad ={ 25 } />        < Saludo nombre = "Carlos" edad ={ 30 } />      </ div >    ); } Componente Hijo: Saludo.js jsx function Saludo ( props ) {    return (      < div style ={{       border : '1px solid gray' ,       padding : '10px' ,       margin : '10px' ,       borderRadius : '5px'      }}>        < h3 > Hola { props . nombre }</ h3 >        < p > Tienes { props . edad } años ...
Leer más

9.6-Ciclo de Vida de un Componente React

  Ciclo de Vida de un Componente React Fases del Ciclo de Vida: 1. Montaje (Mounting) El componente se crea y se inserta en el DOM. 2. Actualización (Updating) El componente se re-renderiza debido a cambios en props o estado. 3. Desmontaje (Unmounting) El componente se elimina del DOM. Diagrama Completo del Ciclo de Vida En Componentes de Clase: javascript class MiComponente extends React . Component {    // 1. CONSTRUCTOR (montaje)    constructor ( props ) {      super ( props );      this . state = { contador : 0 };     console . log ( 'constructor' );    }    // 2. getDerivedStateFromProps (montaje/actualización)    static getDerivedStateFromProps ( props , state ) {     console . log ( 'getDerivedStateFromProps' );      return null ; // Retorna nuevo estado o null    }    // 3. RENDER (montaje/act...
Leer más

9-Componentes en React-estado

Concepto Básico Los componentes son los bloques fundamentales de una aplicación en React. Son piezas independientes y reutilizables de código que definen: Cómo debe verse una parte de la UI (estructura HTML) Cómo debe comportarse (lógica y funcionalidad) Analogía Imagina que estás construyendo una casa: Componente = Habitación (cocina, baño, dormitorio) Cada habitación tiene su propio diseño y función Puedes reutilizar el mismo diseño de dormitorio varias veces Juntas todas las habitaciones para formar la casa completa Tipos de Componentes 1. Componentes Funcionales (Recomendados actualmente) // Componente como función function Saludo ( props ) {    return < h1 > Hola , { props . nombre } !</ h1 > ; } ******************************************** // Con arrow function const Boton = ({ texto , onClick }) => {    return < button onClick = { onClick } > { texto } </ button > ; }; 2. Componentes de Clase (Legacy) javascript class Co...
Leer más