Eventos en React: onClick, onChange

Clase 6 de 34 • Curso de React.js

Contenido del curso

Introducción y requisitos

1
¿Qué necesitas para aprender React.js?
06:35 min

Maquetación con React.js

Interacción con React.js

Librería de Iconos Personalizados

Herramientas avanzadas: escalabilidad, organización y persistencia

Deploy

Próximos pasos: React #UnderTheHood

Bonus: creando proyectos en React desde cero

Tomar examen

Resumen

¿Cómo integrar eventos en React.js para aplicaciones más dinámicas?

Desarrollar aplicaciones web con React.js es más que solo un ejercicio de diseño. Más allá de estilizar componentes y estructuras siguiendo un esquema de diseño, es crucial que dichas aplicaciones reaccionen dinámicamente a las interacciones de los usuarios. En este segmento, exploraremos cómo hacer que tu aplicación no solo luzca bien, sino también funcione de manera intuitiva respondiendo a eventos del usuario.

¿Por qué es importante escuchar eventos en una aplicación React.js?

Incorporar eventos en tus aplicaciones es esencial para:

Dinamismo: Permitir que tu aplicación reaccione a las interacciones de los usuarios.
Interactividad: Mejorar la experiencia del usuario brindando respuestas inmediatas a sus acciones.
Control del flujo de datos: Facilitar la gestión de cómo y cuándo se debe ejecutar un código específico ante un evento determinado.

¿Cómo gestionar eventos con React.js?

React.js convierte los atributos prefijados con 'on', como onClick y onChange, en "event listeners" (escuchadores de eventos) con JavaScript. Esto implica una serie de ventajas:

JavaScript nativo mejorado: React hace uso de AddEventListener, lo que asegura que el código solo se ejecute cuando el evento sea disparado por el usuario.
Eventos como funciones: Siempre encapsula el código en una función para diferir su ejecución hasta que el usuario realice la acción deseada, como un clic o una escritura.

const handleClick = () => {
  console.log('Le diste click');
};

// Al renderizar el botón en JSX
<button onClick={handleClick}>Haz clic aquí</button>

¿Qué es el SyntheticEvent en React.js?

Cuando trabajamos con eventos en React.js, gestionamos un tipo especial de objeto llamado SyntheticEvent. Este:

Asegura la compatibilidad con todos los navegadores.
Trae consigo propiedades y métodos estándar para el evento, similar a lo que recibiríamos en eventos nativos del DOM.

const handleClick = (event) => {
  console.log('Tipo de evento:', event.type);
  console.log('Target:', event.target);
};

¿Cómo manejar inputs con onChange?

Para inputs, utiliza onChange para capturar cambios en tiempo real y manipular datos como texto escrito por el usuario.

const handleInputChange = (event) => {
  console.log('Escribiste:', event.target.value);
};

// En uso:
<input type="text" onChange={handleInputChange} />

Usar onChange en un <input /> te permite seguir cada letra escrita o borrada en tiempo real, esencial para funciones como buscadores o filtros de datos.

¿Qué sigue después de escuchar eventos?

Después de capturar un evento y obtener los datos necesarios, el siguiente paso es comunicar esos datos a otros componentes y actualizar la UI. Esta comunicación y actualización está facilitada por una herramienta fundacional en React: el estado, que aprenderemos a manejar en las próximas sesiones.

React.js nos permite manejar eventos con facilidad mientras asegura que nuestras aplicaciones sean interactivas y responden eficazmente a las acciones del usuario. ¿Estás listo para seguir profundizando en el mundo de React? El siguiente paso es aprender a utilizar el estado para hacer que esos datos impacten en nuestra aplicación. Sigue adelante, el aprendizaje y la excelencia están a solo un clic de distancia.

Comentarios

Gianluca Enzo Procopio

student•

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!

Diego Fernando Pallares Ramirez

student•

Tiene una actitud genial, como de inocencia pero muy profesional, es verdad y lo hace a uno reir en ocasiones .

Cristian Contreras

student•

Cierto. y cada vez lo hace mejor. :)

Francisco Salazar

student•

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.

Luis Ortiz

student•

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

Jonathan Guidi

student•

++¿Cómo escuchamos los eventos en React?++ .. Una de las formas es añadiendo "onclick" 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 "onClick". Todo lo que empiece con "on" 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.

Luis Fernando Montoya Garcia

student•

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

Dave Juanes

student•

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's.

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.

Luis Alfredo Suarez

student•

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: .

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. .

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.

!Imgur

Espero sea de utilidad. 👨‍💻

John Malku Córdova Sinchico

student•

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 :D , pero con esta manera que explico ya me siento mas emocionado de las cosas que se pueden hacer en React.

Edwin Gustavo Rozo Gómez

student•

Entre otras cosas porque de esta manera sería muy programación imperativa, y la idea es que sea más declarativo.

Rubén Ernesto Aragón Gil

student•

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.

Chrystian Fabian Lozano Ramirez

student•

El mejor profe!!!!!

Diego Galeano Madrigal

student•

Hola! quiero compartir con ustedes un proyecto propio de un restaurante realizado a partir de este curso... todas las observaciones son bienvenidas gracias

link deploy

link repositorio

Camilo Andres Sanchez Roncancio

student•

Excelente el proyecto

Pablo Cesar Acosta Paredes

student•

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

paula peña constain

student•

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

José Bastidas

student•

No deberías tener miedo a JS puesto que estas herramientas (Angular, React) son basadas en este. Más bien te invito a que lo conozcas a profundidad para manejar mucho mejor la herramientas y frameworks del Frontend

Enrique Manuel Sánchez Castañeda

student•

what ? pero si incluso angular usa typescript, no tiene sentido hasta diria que angular tiene una curva mas elevada que react xd

Diego Fernando Pallares Ramirez

student•

Osea que event es una palabra reservada de React ?

Francisco Ponce

student•

No precisamente, tomemos el ejemplo del CreateTodoButton del profe juan.

El método onClick puede recibir una función anónima con un parámetro, que es el "objeto" evento. Como es un parámetro, en realidad puedes nombrarlo como tú quieras, pero por convención y buena práctica hay que hacer referencia a su contenido.

Podrías ponerle pollito si lo prefieres, pero no tendría mucho sentido

<import './CreateTodoButton.css';

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

export { CreateTodoButton };

Juan Castro

teacher•

Noup. Más bien de JavaScript.

Andrés Soret Chacin

student•

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 "on", 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 "todo", 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.

Juan José Fonseca Buitrago

student•

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

N40 M10

student•

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.

Jose Luis Bedoya

student•

Muy buena explicación!

Cristian Camilo Cortes Ortiz

student•

EVENTOS

Los eventos en React.js son manejadores de interacción que permiten a los desarrolladores capturar y responder a las acciones del usuario de manera eficiente y declarativa. Similar a los eventos en el DOM nativo, los eventos de React se nombran usando camelCase (por ejemplo, onClick en lugar de onclick) y se pasan como funciones en los atributos de los elementos JSX*.* React sintetiza estos eventos utilizando un sistema de delegación y agrupación, proporcionando una capa de compatibilidad entre navegadores y optimizando el rendimiento. Este enfoque permite una mayor consistencia y un control más preciso sobre las interacciones de la interfaz de usuario en aplicaciones modernas.

MAURICIO RAMON SILVA SANDOVAL

student•

Increíble profesor Juan, saludos desde Guadalajara, México. <3

<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);
        }} />

import React, { Component } from 'react';

class MiComponente extends Component {
  handleClick() {
    alert('Botón clickeado');
  }

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

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>
    );
  }
}

<import './CreateTodoButton.css';

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

export { CreateTodoButton };

Eventos en React: onClick, onChange

Introducción y requisitos

¿Qué necesitas para aprender React.js?

Maquetación con React.js

¿Qué es un componente?

Componentes de TODO Machine

¿Cómo se comunican los componentes? Props y atributos

Estilos CSS en React

Interacción con React.js