Eventos en React: onClick, onChange

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

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.

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

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. 👨‍💻

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.

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

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.

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!

Interesante, y yo que no encontraba como utilizar los eventos para React y cambiar los colores de los botones si ya se presionaron. 🤦‍♀️

Excelente profesor

Comparto documentación simplificada

https://www.reactjs.wiki/como-anadir-un-evento-a-un-componente-en-react

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 “TodoSearch” 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 “Experiments” o “Experimentos.”

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 “Event”, cuestión este último si funciona, pero me devuelve una function, en donde no logro encontrar el value target, tampoco me funciona escribir “Event.target”, ¿A alguien más le ha pasado?