No tienes acceso a esta clase

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

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y mucho m谩s.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

5 D铆as
3 Hrs
27 Min
10 Seg
Curso de React.js

Curso de React.js

Juan David Castro Gallego

Juan David Castro Gallego

Eventos en React: onClick, onChange

6/34
Recursos

Aportes 32

Preguntas 5

Ordenar por:

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

Cada vez, estoy m谩s convencido que con Juan puedo aprender cualquier tecnolog铆a por m谩s dificil que pueda parecer. Tiene una explicaci贸n s煤per elocuente, gracias por todo Juan!

Qu茅 maravilla es React, vengo de aprender html, css y javascript y de verdad el cambio es espectacular. Juan David todo un profesional ense帽ando React, gracias por este curso.

Este profesor deber铆a dar clases de todo en Platzi, hasta clases de redes neuronales deber铆a dar

驴C贸mo escuchamos los eventos en React?

Una de las formas es a帽adiendo 鈥渙nclick鈥 a nuestro elemento, parecido a la forma que lo realiz谩bamos convencionalmente en HTML y JS, con la diferencia que en React utilizaremos camelCase, 贸sea 鈥渙nClick鈥.
Todo lo que empiece con 鈥渙n鈥 en React ser谩 considerado un Evento, es decir, todo lo que comience con "on" ser谩 transformado a un AddEventListener (Escuchador de Eventos), es importante tener en cuenta que el valor que recibir谩 nuestro Evento, debe ser encapsulado dentro de una funci贸n para que se ejecute correctamente.

Clase 6 - Evenctos en React: onClick, onChange

Los eventos nos sirven para detectar acciones del usuario en interaccio贸n con nuestra aplicaci贸n. Estos eventos en React deben ser con CamelCase onCLick esto es un addEventListener.

Para poder ejecutar estos eventos en React, se deben usar arrow functions con la estructura () => {} de esta manera React entiende y no ejecuta de manera inmediata las funciones.

<input type="search" placeholder="Search..."
        onChange={(event) => {
          console.log('Escribiste en el Todo Search')
          console.log(event)
          console.log(event.target);
          console.log(event.target.value);
        }} />

Dentro del fragmento de codigo podemos mostrar por consola el evento con las diferentes propiedades que necesitaremos en el buscador o para crear nuevos ToDo鈥檚.

El evento como tal nos muestra la propiedad SyntheticBaseEvent que es contenedor de todas las propiedades del evento, siendo mas sepecifico target que nos muestra el elemento con el cual se esta interactuando y finalmente value que especificamente y en tiempo real nos muestra el valor enviado por el evento.

Yo actualmente estoy tomando el programa ONE de oracle y ahi estamos viendo un curso de React la verdad es que yo no estaba entendiendo nada absolutamente nada y llegue aqui a platzi con juan todo desmotivado y lo que no pude aprender alla con casi todo el curso aqui lo aprendi unicamente en 6 clases me muero de curiosidad para ver que puedo aprender en las 34 clases que conforman este modulo

yo habia usado el evento keyup y dentro de la funci贸n flecha hab铆a guardado en una variable con el document.queryselector el inputsearch por la clase que tiene y desde la variable imprimia el value 馃槃 , pero con esta manera que explico ya me siento mas emocionado de las cosas que se pueden hacer en React.

06/34 Curso de React: Eventos en React: onClick, onChange

En React, puedes gestionar eventos como onClick y onChange para interactuar con los componentes y responder a las acciones del usuario. Aqu铆 te explico c贸mo funcionan estos dos eventos en React:
.

  1. onClick: Este evento se utiliza para manejar clics del mouse en elementos JSX, como botones, enlaces o cualquier otro elemento interactivo. Cuando se produce un clic en el elemento, la funci贸n de manejo de eventos asociada se ejecuta.

    Ejemplo de uso de onClick:

    import React, { Component } from 'react';
    
    class MiComponente extends Component {
      handleClick() {
        alert('Bot贸n clickeado');
      }
    
      render() {
        return <button onClick={this.handleClick}>Haz clic</button>;
      }
    }
    

    En este ejemplo, cuando el usuario hace clic en el bot贸n, se ejecuta la funci贸n handleClick, que muestra una alerta.
    .

  2. onChange: Este evento se utiliza com煤nmente en elementos de entrada, como <input>, <textarea> o <select>, para detectar cambios en su valor. Se dispara cada vez que el usuario modifica el contenido del elemento.

    Ejemplo de uso de onChange con un campo de entrada de texto:

    import React, { Component } from 'react';
    
    class MiComponente extends Component {
      constructor() {
        super();
        this.state = { texto: '' };
      }
    
      handleChange(event) {
        this.setState({ texto: event.target.value });
      }
    
      render() {
        return (
          <div>
            <input
              type="text"
              value={this.state.texto}
              onChange={this.handleChange.bind(this)}
            />
            <p>Texto ingresado: {this.state.texto}</p>
          </div>
        );
      }
    }
    


En este ejemplo, el estado texto se actualiza cada vez que el usuario modifica el contenido del campo de entrada de texto, gracias al evento onChange.

Recuerda que en React, es importante enlazar los manejadores de eventos a la instancia actual del componente utilizando .bind(this) o utilizando arrow functions para evitar problemas de contexto (this). Adem谩s, puedes acceder al valor actual de un elemento de entrada mediante event.target.value dentro de la funci贸n onChange.

Estos son ejemplos b谩sicos de c贸mo se utilizan los eventos onClick y onChange en React. Puedes utilizar estos eventos y sus variantes en otros elementos y situaciones para crear aplicaciones interactivas y receptivas.

Espero sea de utilidad. 馃懆鈥嶐煉

Eventos (onclick, onSubmit, etc.):

Son utilizados para capturar interacciones del usuario, como hacer clic en un bot贸n o enviar un formulario.
Se usan para definir funciones que manejan la l贸gica relacionada con la interacci贸n.
No est谩n destinados a mantener estados.
/

useState: Es un hook de React que permite tener estados locales en un componente.

/
Se utiliza para declarar variables de estado y sus cambios provocan actualizaciones en la interfaz de usuario.
Sirve para mantener datos que pueden cambiar durante el ciclo de vida del componente.
En resumen, los eventos se usan para capturar acciones del usuario, mientras que useState es para gestionar estados locales que afectan la interfaz de usuario. Ambos son conceptos distintos pero a menudo se utilizan juntos en los componentes de React para crear interacciones m谩s din谩micas y receptivas.

El mejor profe!!!

Con el llamado de las funciones tambi茅n se puede hacer usos de las arrowFunction o de la forma tradicional a modo de que sea mas f谩cil de leer

Me hab铆a casado con Angular por el miedo a JavaScript pero con las explicaciones de Juan, React ya me parece mas bonito :33

Introducci贸n a la Interactividad en React.js

  • En la clase anterior y a lo largo de todo el m贸dulo, exploramos la maquetaci贸n de aplicaciones web con React.js.
  • Aprendimos a trabajar con componentes, elementos, propiedades y atributos, as铆 como a aplicar estilos CSS para mejorar la presentaci贸n de nuestras aplicaciones.
  • Aunque logramos un dise帽o atractivo, notamos que la aplicaci贸n carece de interactividad. Al intentar completar, eliminar, buscar o agregar elementos, no observamos ninguna reacci贸n.

Escuchando Eventos en React.js

  • Para abordar la falta de interactividad, en este nuevo m贸dulo nos sumergiremos en la escucha de eventos en React.js.
  • A diferencia del JavaScript y HTML convencional, en React.js, los eventos deben nombrarse de manera espec铆fica, comenzando con 鈥渙n鈥, como onChange o onClick.
  • Estos eventos se manejan mediante funciones que encapsulan el c贸digo que se ejecutar谩 cuando ocurra el evento.
  • Ejemplo: Para el bot贸n de crear un nuevo 鈥渢odo鈥, utilizamos onClick para escuchar el evento de clic. La funci贸n asociada imprime en la consola un mensaje y el evento que lo desencaden贸.
createTodoButton.onClick = () => {
  console.log("Le diste click al bot贸n");
};

Trabajando con Eventos en React.js

  • Al recibir un evento como par谩metro en la funci贸n asociada al evento, podemos explorar sus propiedades. Por ejemplo, event.target proporciona informaci贸n sobre el elemento que desencaden贸 el evento.
  • En el componente TodoSearch, aplicamos el evento onChange para escuchar los cambios en un campo de b煤squeda. Al escribir, cada modificaci贸n se refleja en tiempo real en la consola.
TodoSearch.onChange = (event) => {
  console.log(`Escribiste en el TodoSearch. Evento: ${event.type}`);
  console.log(`Texto escrito: ${event.target.value}`);
};
  • La propiedad event.target.value es crucial para capturar la entrada del usuario, como en un campo de b煤squeda.

Pr贸ximos Pasos: Implementaci贸n del Estado en React.js

  • Aunque ahora detectamos las interacciones de los usuarios, necesitamos m谩s que simples mensajes en la consola. La informaci贸n debe comunicarse a otros componentes para realizar acciones espec铆ficas.
  • Para esto, introduciremos el concepto de estado en React.js en la pr贸xima clase. El estado nos permitir谩 almacenar y actualizar datos relevantes para la interactividad, como la entrada del usuario en el campo de b煤squeda.

Sugerencias para la Pr谩ctica Continua

  • Configura WSL 2 en tu computadora para comenzar a desarrollar en un entorno de Linux en Windows.
  • Explora los cursos disponibles en Platzi relacionados con el desarrollo web, React.js y otras 谩reas de programaci贸n para expandir tus conocimientos.
  • Aprovecha tu suscripci贸n a Platzi para seguir aprendiendo y desarrollando habilidades en el campo de la programaci贸n.

Me parece que Juan DC comics es uno de los mejores profes de platzi junto con Freddy.

Recuerdo que exist铆an recomendaciones de seguridad sobre no escribir algo hasta estar 100% seguro de que era lo que se quer铆a escribir, ahora entiendo que es por este tipo de cosas.

Muy buena explicaci贸n!

Incre铆ble profesor Juan, saludos desde Guadalajara, M茅xico. <3
wow Genial usar react.js te ahorra mucho tiempo de codificaci贸n, por decirlo de otra manera de facilita el trabajo. me gusta c贸mo funciona

Interesante, y yo que no encontraba como utilizar los eventos para React y cambiar los colores de los botones si ya se presionaron. 馃う鈥嶁檧锔

definitivamente David es increible trasmitiendo conocimiento !
鈿涳笍 En React, los eventos son acciones que pueden ser detectadas dentro de componentes. React proporciona una serie de manejadores de eventos que puedes utilizar para responder a ciertas acciones del usuario, como clics, cambios en los inputs, y m谩s. Aqu铆 te explico dos eventos comunes: `onClick` y `onChange`, con ejemplos breves de cada uno. 1\. \*\*onClick\*\*: \- Este evento se activa cuando el usuario hace clic en un elemento, como un bot贸n o un div. \- Es com煤nmente utilizado para ejecutar una funci贸n cuando el usuario interact煤a con el elemento. \*\*Ejemplo de `onClick`:\*\* ```jsx function App() { function handleClick() { alert('Bot贸n clickeado!'); } return ( \<button onClick={handleClick}> Haz clic en m铆 \</button> ); } ``` En este ejemplo, cuando el bot贸n es clickeado, se ejecuta la funci贸n `handleClick`, que muestra un alerta. 2\. \*\*onChange\*\*: \- Este evento se utiliza principalmente en elementos de formulario, como `\<input>`, `\<textarea>` o `\<select>`. \- Se activa cada vez que el valor del elemento cambia, lo que es 煤til para realizar tareas como la validaci贸n de datos o el manejo de entradas del usuario en tiempo real. \*\*Ejemplo de `onChange`:\*\* ```jsx function App() { function handleChange(event) { console.log('Valor actual: ', event.target.value); } return ( \<input type="text" onChange={handleChange} /> ); } ``` En este ejemplo, cada vez que el usuario escribe algo en el campo de entrada, la funci贸n `handleChange` se ejecuta, registrando el valor actual del input en la consola. Estos ejemplos ilustran c贸mo puedes responder a interacciones del usuario en una aplicaci贸n React. Los eventos son fundamentales en React para crear interfaces interactivas y din谩micas.

Excelente profesor

Breve explicaci贸n

Los eventos onClick y onChange son manejadores de eventos en React que te permiten ejecutar funciones o l贸gica espec铆fica cuando ocurren ciertos eventos en los elementos de tu interfaz de usuario.

onClick:

El evento onClick se activa cuando un elemento es clicado. En tu ejemplo:

<button
 className="CreateTodoButton"
 onClick={(event) => {
    console.log('le diste click');
    console.log(event);
    console.log(event.target);
 }}
>
 +
</button>

Cuando haces clic en el bot贸n con la clase CreateTodoButton, se ejecuta la funci贸n proporcionada como onClick. En este caso, la funci贸n imprime mensajes en la consola, mostrando informaci贸n sobre el evento que ocurri贸, como el objeto del evento y el objetivo del evento (en este caso, el elemento de bot贸n).

onChange:

El evento onChange se activa cuando el valor de un elemento de formulario cambia. En tu ejemplo:

<input
 className="form-control me-2 small-input TodoSearch"
 type="search"
 placeholder="Search"
 aria-label="Search"
 onChange={(event) => {
    console.log('Write in the TodoSearch');
    console.log(event);
    console.log(event.target);
    console.log(event.target.value);
 }}
/>

Cuando escribes o cambias el valor en el campo de b煤squeda (<input>), se ejecuta la funci贸n proporcionada como onChange. En este caso, la funci贸n imprime mensajes en la consola, mostrando informaci贸n sobre el evento y el valor actual del campo de b煤squeda.

En resumen:

  • onClick se utiliza para manejar eventos de clic, 煤til para botones u otros elementos clicables.
  • onChange se utiliza para manejar eventos de cambio, com煤nmente utilizado en campos de entrada de formularios para capturar cambios en el valor.

Ambos eventos son parte de la interfaz de eventos de React y son esenciales para la interactividad en aplicaciones React. Puedes utilizarlos para realizar acciones espec铆ficas en respuesta a la interacci贸n del usuario con tu aplicaci贸n.

Tambi茅n se puede acceder a los eventos de la siguiente forma:

<input 
        placeholder="Escribe una tarea" 
        className="TodoSearch"
        onChange={
        	e => console.log(e.target.value)
        }
/> 

[](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)

Siempre se debe agregar una funci贸n al evento para que no se ejecute siempre al cargar el HTML sino que ese evento se ejecute cuando deba y dependiendo de lo que sea: onClick, onChange, onBlur, etc鈥

Toda propiedad que empiece con el sufijo onX y se escriba con camelCase es un escuchador de eventos y debe recibir una funcion, la sintaxis es onChange={ fnc() => xFunction }

React me parece fascinante, muy buena explicacion profe!

Si no les aparece lo que escriben en el TodoSearch en la consola, cambien de navagador, en brabe no aparce pero en google chrome si

Para solucionar el problema de que no les aparece lo que escriben en el 鈥淭odoSearch鈥 en la consola, deben seguir estos pasos:

  1. Deben hacer clic en el icono de configuraci贸n o engranaje que se encuentra en la parte superior, en la esquina izquierda, el primero de ellos.

  2. Luego, seleccionen 鈥淓xperiments鈥 o 鈥淓xperimentos.鈥

  3. A continuaci贸n, desactiven la opci贸n Hide ignore-listed code in sources tree view o Ocultar c贸digo ignorado en la vista de 谩rbol de fuentes.

A la hora de escribir event dentro del console.log me indica que est谩 deprecated y que lo recomendado es usar 鈥淓vent鈥, cuesti贸n este 煤ltimo si funciona, pero me devuelve una function, en donde no logro encontrar el value target, tampoco me funciona escribir 鈥淓vent.target鈥, 驴A alguien m谩s le ha pasado?