No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Introducci贸n a React.js

Curso de Introducci贸n a React.js

Juan David Castro Gallego

Juan David Castro Gallego

Manejo de eventos

8/23
Recursos

Manejar eventos en React es muy similar a manejar eventos en el DOM, solo necesitamos pasarle una propiedad on + evento, por ejemplo: onClick, onChange, onMouseOver, que ser谩 igual a una funci贸n en la que estar谩 el c贸digo que se ejecutar谩 cuando ocurra dicho evento.

A diferencia de los eventos del DOM, para manejar eventos en React tenemos unas peque帽as diferencias en la sintaxis:

  1. En React los eventos son nombrados usando camelCase.
  2. Tenemos que pasar una funci贸n, ya sea en l铆nea o almacenada en una variable.
  3. No puedes regresar false para prevenir el comportamiento por defecto, debes utilizar preventDefault expl铆citamente.

HTML

<button onclick="click()">button>

React

<button onClick={click}>button>

Pasando argumentos a escuchadores de eventos

En React no tenemos que ejecutar el c贸digo nosotros, React ya maneja esto por debajo, solo es necesario pasar una funci贸n, React solito la ejecutar谩 cuando ocurra el evento que estemos escuchando.

Si necesitamos pasar argumentos a nuestras funciones, necesitamos encerrar nuestra funci贸n dentro de otra funci贸n, esto porque al pasarle argumentos a una funci贸n la estamos ejecutando, veamos un ejemplo:

function CreateTodoButton(props) {
  const onClickButton = (msg) => {
    alert(msg);
  };
  
  return (
    <>
        {/* 鉁 */}
        <button
          className="CreateTodoButton"
          onClick={() => onClickButton('Aqu铆 se deber铆a abrir el modal')}
        >
          +
        button>
        {/* 鉂 */}
        <button
          className="CreateTodoButton"
          onClick={onClickButton('Esta funcin se ejecuta al inicio, no al presionar el botn'}
        >
          +
        button>
    
  );
}

鉁 Es importante siempre pasar una funci贸n.

Dentro de estos eventos tambi茅n puedes recibir como par谩metro la informaci贸n del evento, en donde puedes encontrar propiedades muy interesantes, como por ejemplo, el valor de alg煤n input, con event.target.value.

function TodoSearch() {
  const onSearchValueChange = (event) => {
    console.log(event.target.value);
  };
  
  return (
    <input
      className="TodoSearch"
      placeholder="Cebolla"
      onChange={onSearchValueChange}
    />
  );
}

Contribuci贸n creada por: Brandon Argel.

Aportes 54

Preguntas 19

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

鈽 Por si no entendiste bien por qu茅 a veces enviamos arrow functions y por qu茅 otras veces no, aqu铆 te lo explico:
.
Cualquier evento recibe s铆 o s铆 una funci贸n, es decir, debemos mandarle s铆 o s铆 una funci贸n para que React internamente pueda ejecutarla en cuanto dicho eventop ocurre.
.
El asunto, es que tiene que ser s铆 o s铆 una funci贸n que React pueda ejecutar, por eso no podemos mandar directamente un console.log() ni un alert(), porque aunque ambos son funciones, nosotros estamos ejecut谩ndolas directamente al ponerles los par茅ntesis, pero nosotros no debemos ejecutarlas, nosotros solo debemos mandarlas y ya React se encargar谩 de ejecutarlas.
.
Es por eso que mandamos arrow functions, porque estas son funciones que React puede ejecutar cuando quiera, y pues dentro de esas arrow functions est谩 el c贸digo que queremos ejecutar cuando el evento suceda.
.

onClick={() => alert("React s铆 puede ejecutar esta arrow function cada que le de la gana OwO")}

.
Sin embargo, recordando que los eventos reciben funciones, yo puedo crear una variable que dentro guarde una funci贸n, por ejemplo:
.

const adentroTengoUnaFuncion = () => {
    console.log("Hola");
    console.log("Soy una funci贸n que est谩 siendo guardada dentro de una variable UwU");
}

.
Yo puedo ejecutar esta funci贸n sin problemas de esta forma adentroTengoUnaFuncion(), pero tambi茅n puedo mandarsela a React para que 茅l lo ejecute cuando quiera (en este caso, cuando el evento suceda):
.

onClick={adentroTengoUnaFuncion}

.
Nota como aqu铆 mandamos la funci贸n sin par茅ntesis, esto es porque en el momento en el que le ponemos par茅ntesis ser铆amos nosotros quienes ejecutan la funci贸n, pero recuerda que nosotros no debemos ejecutar la funci贸n, sino React es quien tiene que ejecutarla. 驴Por qu茅? Pues porque si la ejecutamos nosotros, esta se va a ejecutar justo en el momento que esa l铆nea de c贸digo sea le铆da por nuestra computadora, y nosotros no queremos eso, nosotros queremos que nuestra funci贸n se ejecute 煤nicamente cuando el evento suceda, por eso la mandamos sin par茅ntesis, para que React pueda ejecutarla cuando dicho evento ocurra 馃槃
.
Peeeeeero, podemos hacer algo genial (y puede ponerse complicado), no veo raz贸n para hacer esto, pero te lo explico por alimentar tu curiosidad jaja:
.
S铆 podemos ejecutar nosotros la funci贸n 馃憖鈥 Yo s茅, esto es totalmente lo contrario a lo que te acabo de decir, pero checa esto 馃憞
.
Nosotros s铆 podemos hacer esto:
.

onClick={adentroTengoUnaFuncion()}

Solamente s铆 nuestra funci贸n est谩 as铆:
.

const adentroTengoUnaFuncion = () => {
    return () => {
        console.log("Hola");
        console.log("Soy una funci贸n que est谩 siendo guardada dentro de una variable UwU");
    }
}

.
Wait鈥 what? Es simple 馃憖 Mi funci贸n adentroTengoUnaFuncion est谩 retornando otra funci贸n, eso significa que, en el momento que mi c贸digo se ejecute, mi funci贸n adentroTengoUnaFuncion tambi茅n se va a ejecutar inmediatamente, pero como esta funci贸n est谩 retornando otra funci贸n, al final mi evento onClick acabar谩 recibiendo la funci贸n que necesita para funcionar!!! OwO
.
驴Por qu茅 har铆amos esto? Seguramente tenga alg煤n caso de uso, pero tambi茅n es interesante saber que se pueden hacer este tipo de cosas UwU

Creo que me estoy enamorando de React.

7.-Manejo de eventos (internos)

En react todo lo que empiece con on nos va a ayudar a recibir los eventos de nuestros usuarios al cual le vamos a enviar una funci贸n que se ejecute cuando los usuarios ejecuten la acci贸n que estamos escuchando. Si no usamos una arrow function el c贸digo se va a ejecutar de una, se tiene que envolver en una funci贸n para que se ejecute cuando sea necesario, en este caso cuando se de click.

<button className="CreateTodoButton" onClick={() => console.log("click")}>

Los eventos tambi茅n se pueden crear guardando la funci贸n en una constante, y al momento de llamarlo solo se nombra.

const聽onClickButton聽=聽()聽=>{
alert('Aqu铆聽deber铆a聽ir聽el聽modal');

};

return聽(

<buttonclassName="CreateTodoButton"onClick={onClickButton}>

+

</button>

);

o

const聽onClickButton聽=聽(*msg*)聽=>聽{
	alert(*msg*);
	
	};
	
	return聽(
	
	<button
	
	className="CreateTodoButton"
	
	onClick={()聽=>聽onClickButton("Aqu铆聽va聽el聽modal:)")}
	
	>
	
	+
	
	</button>
	
);

Los nombres de eventos en React comienzan con 鈥渙n鈥 y luego el primer caracter de cada palabra en may煤sculas:

onClick
onDoubleClick
onMouseEnter
onMouseLeave
onMouseMove
onKeyPress
onKetUp
onSubmit

when changing the input called the event onChange the callback appears as a synthetic-event the reason for appearing a synthetic-event and no event is that the event is a trigger for jsx and not for HTML it is important recognize this difference because all events are remapped because jsx is not a html

para escuchar el clik del boton = onClick
para escuchar el valor de nuestro input = onChange

Estos video han de grabarlos tarde en la noche, JuanDC se ve s煤per emocionado, pero no sube la voz鈥 隆que buen vecino!

Que feliz me siento que al fin entiendo como funciona el target!!! lo explica muy sencillo

haha me encanta la emoci贸n del instructor, 13:40 se nota cuando disfrutan su trabajo

Ohhh, esta clase me encant贸!!

me di cuenta de que tambi茅n se puede insertar el mensaje de la alerta a partir de una variable llam谩ndola como argumento de onClickButton dentro del evento onClick ,no se que utilidad pr谩ctica puede tener o si a lo lejos es una bueno practica( soy nuevo en react ) pero es bueno saber que se puede 馃憤.

se declarar铆a de esta forma:

function CreateTodoButton() {

    let mesag = 'holap'

    const onClickButton = (msg) => {
        alert(msg);
    }

    return(
        <button 
        className="CreateTodoButton"
        onClick={ () => onClickButton(mesag) }
        >
             +
        </button>
    );
}

Una forma de poder enviar los mensajes tambien:

let onComplete = () => {
    alert(`Has completado la tarea ${props.text}`)
  }

Yo solo debo decir algo, y espero el director course no me banee mi cuenta de Platzi pero.

Team Iron Man 鈾

Funciona como un callback, mas o menos, la forma en la que usamos los eventos

Mis aportes a la clase, en caso que alguien le ayude por el lado de TS.

//button.tsx
type newTodoType = string;

const Button = () => {

  const onClickButton = (message: newTodoType) => {
    console.log('completed', message);
  };

  return (
    <div className="p-6 flex justify-center">
      <button
        className="border-2 w-52 hover:bg-gray-50"
        onClick={() => onClickButton('click!!')}
      >
        +
      </button>
    </div>
  );
};

Aca, vale la pena aclarar algo:
button debe recibir un argumento, que cuando se ejecute el evento onClick, va a desencadenar el console.log
Por otro lado, en todo-item, las funciones anonimas solamente expresan una ejecucion, su referencia puede pasarse al argumento del onClick

.

// todo-item.tsx
type ItemProps = {
  text: string;
  completed: boolean;
}

const TodoItem = (props: ItemProps) => {

  const onCompleted = () => {
    console.log('Completaste todo', props.text);
  };
  const onDeleted = () => {
    console.log('Eliminaste todo', props.text);
  };
  
  return (
    <li className="grid grid-cols-3 items-center gap-3 my-2 text-center w-full border-b-2">
      <span 
        className="cursor-pointer hover:bg-green-700 hover:text-gray-100"
        onClick={onCompleted}
      ></span>
      <p className={`${props.completed && 'line-through'}`}>
        {props.text}
      </p>
      <span
        className="cursor-pointer hover:bg-red-600 text-gray-400 hover:text-gray-100"
        onClick={onDeleted}
      >
        X
      </span>
    </li>
  );
};

.
Ahora, en el lado del componente todo-search, en la creacion de la funcion, esta siendo pasado un argumenbto event al evento onChange. Lo que ocurre es que

los eventos onChange devuelven un objeto de tipo evento sint茅tico (Sythetic Event) que contiene metadatos 煤tiles, como el id, name y el value actual del input.

// todo-search
const TodoSearch = () => {
  const onSearchEvent = (event: any) => {
    console.log('', event.target.value)
  }

  return (
    <div className="p-6 flex justify-center">
      <input
        type="text"
        className="border p-2 border-slate-300 hover:border-b-indigo-900 focus:outline-none"
        placeholder='Buscar o crear nueva tarea'
        onChange={onSearchEvent}
      />
    </div>
  );
};

Analizo y concluy贸 que Un evento es un proceso as铆ncrono, por eso los eventos piden una funcion (callback, funci贸n que pasa como argumento de otra funci贸n para poder generar un c贸digo as铆ncrono)

Exelente Curso馃挌

Ya hab铆a hecho un curso de react el a帽o pasado, me gusto la herramienta; regrese por otro para aclarar muchas dudas y refrescar la memoria, y, francamente, siento como si estuviera aprendiendo react por primera vez. Amo la forma de explicar de este profesor, todo muy claro, hace que todo parezca tan sencillo鈥

鈥淭enemos que volver a envolver nuestra arrow function en otra arrow function鈥

Creo que fu茅 una buena idea dominar vue primero antes de meterse con React, creo que vue permite entender estos conceptos de una manera m谩s sencilla. OJO, no estoy comparando frameworks, solo que en mi experiencia vue es mucho m谩s amigable al principiante que React. Habiendo dicho esto, React me esta gustando bastante

Excelente clase! Lo explic贸 mejor que Fernando Herrera!!!!!

excelente la manera que explica

me parece que explico muy bien la parte de donde sale el value. event.target.value , asi cada quien puede mirar que otra cosa necesita hacer en su codigo

Busqu茅 la manera de hacer un Delay que en realidad el nombre correcto es debounce, como buena pr谩ctica para esperar medio segundo antes de ejecutar la funci贸n y ya que exista una conexi贸n a la BD, solo hacer 1 llamada ya que el usuario haya terminado de escribir, esta fue mi soluci贸n.

Estoy utilizando MUI para la creaci贸n de estilos

import React, { useState, useEffect  } from 'react';
import TextField from '@mui/material/TextField';


function TodoSearch() {
    const [query, setQuery] = useState("");
    
    useEffect(() => {
        const timeOutId = setTimeout(() => console.log(query), 500);
        return () => clearTimeout(timeOutId);
    }, [query]);

    const onSearchValueChange = (e) => {
        setQuery(e.target.value)
    }
    return (
        <TextField 
        label="Search Task" 
        variant="standard" 
        fullWidth
        value={query}
        onChange={onSearchValueChange}/>
    );
}

export { TodoSearch }```

Parce!! Juan definitivamente contagia con su forma de ser, es 煤nico el chino!!
Gracias Profe 馃槂

Esto va de cero a amor a primera vista 馃挋馃槀

Increible.

asi va quedando, excelente

Como lo veo cada vez que hago un npm start

Aclaraci贸n: ejecuci贸n funciones en un prop al renderizar si no estan contenidas en una funci贸n.

Si el codigo JS viene definido directamente en el evento, react la autoejecuta al momento de renderear el DOM. Ejemplo:

onClick={console.log('mi mensaje')}

Para prevenir la autoejecucion utlizamos un arrow function. Ejemplo:

onClick= { () => { console.log('mi mensaje') } }

Tambien podemos guardar la funcion en una variable y pasarsela como parametro:
Ejemplo:

const myFn = (data) => { 
	console.log('mi mensaje', data)
}; 
onClick= { () => myFn('montoyita') }

Ademas, si la funcion no recibe parametros podemos nombrarla sin necesidad de agregar a un arrow function:
Ejemplo:

const myFn = () => { 
	console.log('mi mensaje')
}; 
onClick= {myFn}

Manejo de EVENTOS

-onClick
-onChange
-onMouserOver

Se nombran con camelCase, pasamos una funcion en linea o almacenada en variable, usamos preventDefault.
Pasar funciones como argumentos, encerradas en otra funcion.

Podemos obtener informacion como el valor de un input usando event.target.value

Eventos disponibles
React incluye eventos de:
teclado omo onKeyUp, onKeyPress, onKeyDown;
mouse como onClick, onMouseMove, onDragOut, onDrop, etc.
de formularios, como onChange, onInput, onInvalid, onSubmit

Excelente Clase! La verdad me impresiona mucho los ejemplos que con ellos se entiende cada cosa que se va realizando. Fue una clase muy bien aportada

Yo habia empezado con otro curso de Ract y practicamente lo odie aqui en Platzi, pero este de introduccion antes me enamora cada vez mas 鉂わ笍

Excelente curso hasta el momento!

Al fin pude ver de donde usan tantos m茅todos y propiedades 馃槮

manejo de eventos con todos

manejo de eventos cambios de estilos todos
combinando colores y diferentes estilos

import React from "react";
import './TodoSearch.css';

function TodoSearch(){
    const onSearchValueChange = (event)=>{
        console.log(event.target.value)
    }
    return(
        <input 
            className="TodoSearch" 
            placeholder="Cebolla"
            onChange={onSearchValueChange}
        />
    );
}

export {TodoSearch};

La verdad eres muy gran profesor UwU

Este pudo ser un curso pr谩ctico de React.js y no de Introducci贸n a React.js
juan comete errores o hay cosas que menciona muy a la ligera como las props que solo tom贸 un minuto para decir que las usar铆a.
Me hace pensar que este curso lo improvis贸 o se lo prepar贸 una noche antes. Usar una ra铆z cuadrada en vez de usa una palomita en el proyecto pff hasta una b煤squeda r谩pida en google sale.
Agradezco al buen RetaxMaster por de nuevo complementar los conocimientos en los cursos.

Excelente curso, la voz del profe parece de un personaje animado xd

Excelente clase, por fin pude entender para que sirve el target.

TAANNNNNNNNNNTASSSSSSSS VUELTAS !!!

Wow demasiado duro

completando los todos


manejo de eventos

creando manejo de eventos

Pregunta de examen:
驴C贸mo escuchamos el evento de click en un bot贸n con React?

Wow, se me acaba de ocurrir utilizar un filter y un find para filtrar las bsuquedas de losnusuarios a un array de tareas, me esta gustando mucho react. 驴Como se hsria SEO ha una pagina en react ? , el html literalmente esta vacio? tengo un muchas dudas
Creo que vamos a hacer de la forma mas simple lo de completar tareas mas adelante, creo que tal vez vamos a utilizar removeClass ? para quitar los
  • o tareas que ya completamos o algo similar ...
  • Recorde a los callbacks cuando llamo a la arrow function alert con otra arrow function es algo confuso a veces

    Pregunta de examen:
    驴C贸mo escuchamos cuando los usuarios env铆en un formulario con React?