Enlazando eventos

Clase 14 de 37 • Curso de React.js 2019

Clase anteriorSiguiente clase

Resumen

React dispone de eventos. Cada vez que se recibe información en un input se obtiene un evento onChange y se maneja con un método de la clase this.handleChange
Los elementos button también tienen un evento que es onClick.
Cuando hay un botón dentro de un formulario, este automáticamente será de tipo submit. Si no queremos que pase así hay dos maneras de evitarlo: especificando que su valor es de tipo button o manejándolo desde el formulario cuando ocurre el evento onSubmit.

Juan David Reyes

student•

Aquí va mi resumen de las los formas de evitar que el comportamiento default del botón no sea enviar la información:

Bernardo Aguayo Ortega

student•

Gracias hermano!

Juan Jiménez

student•

Gracias por el aporte

Pau Pregoni Juan

student•

Gente para que no tengan que escribir o copiar y pegar siempre lo mismo les recomiendo este plugin para VS Code: ES7 React Snippets

Crean el componente, por ejemplo: BadgeForm.js, y luego solo tipean ‘rce’, Les va a autocompletar el import incluyendo react, la clase con el nombre del archivo y el export también con el nombre del archivo… AHORRA MUCHO TIEMPO y errores tontos. Ejemplo:

También soporta la sintaxis de ES7 que es la manera moderna de trabajar con react, programación funcional.

Saludos!!

Jhon Carlos Colorado Angulo

student•

Wauu que gran aporte. Mucas gracias.

Cesar Bello Bonilla

student•

Buenisimo!!

María José Ledesma

student•

Bernardo Aguayo Ortega

student•

Gracias!! :)

Alexis Villalva

student•

Gracias!

Simón Arenas

student•

Un super tip para crear una clase en 1 segundo: Descargar esta extensión.

Escribir rcc y enter. Y listo!

Pueden ver todos los snippets o shortcuts en el link de la extensión.

Janice Prendas

student•

¡Muchas gracias!

Fernando Pioli Martínez

student•

Gracias!!!!

Juan Carlos Ortiz Huamán

student•

Si desean enviar parametros en los eventos pueden hacer esto:
Estoy pasando 2 parametros a la función handleClick2, el evento y un string "hola"

<button onClick = { e => this.handleClick2(e,"hola")} className="btn btn-primary">Save</button>

Cuando llame a la función handleClick2 lo haria asi para imprimir el valor:

handleClick2 = (e, saludo) =>{
        console.log("button was clicked", saludo);
        
    }```
Eso deberia arrojarme el  resultado -- "button was clicked hola"

José Iván Sandoya

student•

Genial, esto es súper útil en muchos casos.

Rodrigo Rodriguez

student•

Gracias Maestro, ya me ahorraste tiempo!

Francisco López

student•

Un tip. Para conseguir que Emmet funcione en nuestros archivos js hay que ir a "Preferences" > "Settings" Lueo ir a la pestaña "Workspace", buscar en la lista de la izquierda "Extensions" y dentro de ella buscar "Emmet". Una vez llegamos alí buscamos la opción "Include Languages" y tocamos "Edit in settings.json". Una vez se abre ese archivo para editarlo, agregamos lo siguiente: "emmet.includeLanguages": { "javascript": "javascriptreact" }

Y listo!! Emmet funciona en nuestros archivos .js ;)

Fuente: https://medium.com/@eshwaren/enable-emmet-support-for-jsx-in-visual-studio-code-react-f1f5dfe8809c

Juan Manuel Palacios Gaviria

student•

muchisimas gracias francisco

Daniela Gallegos

student•

Muchas gracias, justamente estaba buscando esto

Mario Alejandro Crespo Reyes

student•

Me estoy enamorando de react. ❤️

Jean León

student•

Como no, si el profe es un crack :)

Rodrigo Rodriguez

student•

Si, yo hice un par de proyectos con angular y me dieron dolores de cabeza integrar javascript externos. La verdad me esta gustando mucho React, ojala sea de facil integracion con bootstrap y librerias javascript .

Aseret Jimenez

student•

Handling Events

Frank Antonio Piñin Ato

student•

thanks

David Behar

student•

Un componente de React dispone de eventos sin la necesidad de generarlos mediante addEventListener . Un evento son cosas que el usuario hace o que el navegador hace, mismos que podemos cachar en react para hacer cosas cuando se activan (trigger) los eventos. . Un evento es una prop que recibe una función callback ( ()⇒{} o handleEvent) . Los eventos más comunes que podemos utilizar serían onClick, onChange, onKeyPress, onFocus, onScroll. pero nos son los únicos, podemos manejar casi todos los eventos de html interponiendo un on y usando camelCase. .

const Button = (props) =&gt; {
  handleClick = (event) =&gt; {
		event.preventDefault()
    alert('Handling click')
  }
  return (
    &lt;div&gt;
			&lt;h1&gt;Manzanas&lt;/h1&gt;
			&lt;button onClick={handleClick}&gt;Click me&lt;/button&gt;
		&lt;/div&gt;
  );
}

Matías Wasiak

student•

Buen aporte!

Alexis Antonio Moraga Gallardo

student•

Les dejo un repositorio con el progreso que llevo del curso, y mis notas por si les son útiles =)

Lucas Nicolas Gómez

student•

Gracias alexis, me facilita mucho que hayas comentado todo el codigo. Saludos!

Rafael Soriano Ramírez

student•

En visual studio code al integrar algunas extenciones para react ya no es necesario colocar a mano o copiar el esqueleto de class, únicamente con el atajo rcc se crea el esqueleto por defecto y a su vez con nombre del archivo en la clase

Mariangelica Useche

Team Platzi•

Son muy buenos esos snippets. Los que más uso son: rcc, cp, cs, imp.

La extensión en VS Code se llama ES7 React/Redux/GraphQL/React-Native snippets.

Luis Jeanpier Monserrate

student•

esto es muy util la verdad

Carlos Antonio Molano Solarte

student•

Saludos, como podríamos enviar otro parametro por el evento...?

Eduardo Hidalgo Díaz Rugama

student•

dentro de un componente tienes:

<MyComponent 
	className={...} 
	onClick={ (e)=>myFunction(e) }
/>

ahí le estás dando a un evento "onClick" el argumento "e" que es el argumento propio del evento. eso es un parámetro, uno común. Si quieres mandarle algo mas, supongamos un id que diga que cosa se está clickeando, harías:

<MyComponent 
	className={...} 
	onClick={ (e, id)=>myFunction(e, id) }
/>

y es todo. solo asegurate de que id se lo mandes correctamente.

Angel Hernandez

student•

Hola :D otra solucion que puedes hacer es usar "bind"

<button type="button"
		onClick={this.tu_funcion.bind(this, parametro1, parametro2)}
	Hola mundo
</button>

Y en tu funcion

tu_funcion(parametro1, parametro2, element) {
	console.log("Hola mundo")
}
``

Armando González Tirado

student•

Que extensión usas para cambiar la apariencia de la funcuion arrow e => { };

Jorge Ossa

student•

es un tipografia, puedes usar Fira Code, es la que yo uso, te comparto el enlace:

Diego Alejandro Cifuentes Arango

student•

Odio usar bootstrap, hubiera preferido hacer el css desde inicio así sea rápidamente, pero que más da

Sylvester Josué Rojas Cañón

student•

Anteriormente no me gustaba React, probablemente porque no había un buen mentor que lo enseñara con la calidad como lo hace Platzi 😍. Me esta encantando React

Muchas gracias Platzi

Sergio Raúl Olivares Rojas

student•

seria bueno que compartas las extensiones que usas en VSCode, agilizan mucho el desarrollo.

Johan Mosquera

student•

Puede habilitar Emmet para trabajar con React. Lo puedes ver en este artículo Enable Emmet support for JSX in Visual Studio Code | React

Rubén Padilla

student•

Hey! Si te interesa puedes tomar el curso de Prework: Buenas Practicas y Entorno de desarrollo aquí: donde te enseñan cuales son las extensiones y plugins que necesitas para mejorar tu entorno de desarrollo.

Omar Valentín Ortega Martínez

student•

Están bien chingones los prendedores de Richard :)

Jorge Andres Mena Carcamo

student•

Me paso algo muy loco, ojala alguien me pueda ayudar a entender. Tengo el archivo BadgeForm.js y al momento de aplicar guardar, el Pretiier me saca los paréntesis azules del return. Esto me provoca error. Foto antes de guardar:

Foto despues de guardar:

Daniel Adolfo Ordoñez Rubio

student•

Hola, Jorge :) :thinking: Supongo que podrías cambiar la configuración de prettier para seguir un estilo en particular. Como quickfix podrías usar el comentario // eslint-disable-next-line prettier/prettier para que ignore la línea de return. También podrías cambiar el archivo a .jsx.

Francisco Ponce

student•

Hola Jorge,

¿Podrías ponerle un fragment <></> a tus etiquetas p? De lo contrario me parece que habría que configurar esa extensión u otras cosas como el setting.json. No estoy seguro...

render(){
	return (
		<>
 			<p> BadgeForm</p>
		</>
		)
}

Luis Martín

student•

¿De dónde sale el parámetro e?, ¿Se lo envía automaticamente el input onchange?

Oscar Barajas Tavares

Team Platzi•

“e = event”

En el momento que ejecutas una acción este evento de transmite y lo capturas en tu función la cual te permite ver las propiedades del input.

Seba Cardoso

student•

Si, se envía automaticamente por debajo.

Luis Eduardo Quiroga Esparza

student•

Que extension usa para autocompletar el "HTML" en javascript?

Diego Guillermo Yovera Coveñas

student•

Alguién sabe? yo también estoy sufriendo haciendo html en js :c

Jean León

student•

Ve a la configuración de CODE en el archivo settings.json de EMMET y agrega esto en el JSON

    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "emmet.triggerExpansionOnTab": true```

Enlazando eventos

Introducción a React.js

¿Qué es React.js?

Pre-requisitos

Herramientas que usaremos

Create-react-app

Fundamentos

Clonar el código de GitHub

ReactDOM.render

JSX

Creación y diseño de componentes

¿Qué es un componente?

Qué es y cómo funciona un componente en React.js

Nuestro primer componente

Cómo aplicar estilos

Props

Nuestra primera página

Enlazando eventos

Manejo de estado

Levantamiento del estado

Listas de componentes

React Router

Introducción a React Router

División de la aplicación en rutas

Mejorando la User Interface con un Layout

Component Lifecycle

Introducción del ciclo de vida de un componente

Práctica del ciclo de vida

Llamadas a un API

Introducción llamadas a un API

React.js: Cómo traer datos de un API en React

Solicitando datos (GET)

Mejorando la Experiencia de Usuario durante una petición

Enviando datos (POST)

Manejando los estados de la petición durante el POST

Actualizando datos (PUT)

Actualizaciones automáticas

Mejorando la UI

Los detalles de un Badge

UI Components y Container Components

Portales

Modales

Hooks

Search filter

Conclusion

Conclusión