State - Events

Clase 7 de 29 • Curso Práctico de React JS 2019

Resumen

"React nos permite responder a las interacciones de los usuarios con propiedades como onClick, onChange, onKeyPress, onFocus, onScroll, entre otras.

Estas propiedades reciben el nombre de la función que ejecuta el código que responde a las interacciones de los usuarios. Seguramente, esta función usará la función this.setState para actualizar el estado de nuestro componente.

class Button extends React.Component {
  state = { count: 0 }

  handleClick = () => (
     this.setState({ count: this.state.count + 1 })
  );

  render() {
    const { count } = this.state;

    return (
      <div>
        <h1>Manzanas: {count}</h1>
        <button onClick{this.handleClick}>Sumar</button>
      </div>
    );
  }
}

Recuerda que los nombres de estos eventos deben seguir la nomenclatura camelCase: primera palabra en minúsculas, iniciales de las siguientes palabras en mayúsculas y el resto también en minúsculas."

Andrés Campuzano Garzón

student•

Repasando la clase anterior, yo agregue un condicional para dependiendo del numero de count, cambie "No hay manzanas", "manzana" o "manzanas" :

		return (
			&lt;div&gt;
				&lt;h1&gt;
					🍎: {count}
					{count === 0 ? (
						&lt;p&gt;No hay manzanas&lt;/p&gt;
					) : count === 1 ? (
						&lt;p&gt;manzana&lt;/p&gt;
					) : (
						&lt;p&gt;manzanas&lt;/p&gt;
					)}
				&lt;/h1&gt;
				&lt;button type='button' onClick={this.handleClick}&gt;
					Agregar
				&lt;/button&gt;
			&lt;/div&gt;
		);

Diego Romero

student•

excelente gracias

Miguel Angel Reyes Moreno

student•

¿Es acaso esto un operador ternario con varias condicionales? ¿Como un if else if else?

Nicolás Danilo Peña Fuentes

student•

Me encanta ese "Es momento de hacer cosas geniales" full actitud ese profe

Carlos Vallejo

student•

Si alguien lo desea. Agregué un botón para restar manzanas y un limpiador

state = {
        count : 0,
        mostrar: false,
    }

    handleClickAdd = () => {
        this.setState({
            count: this.state.count + 1,
            mostrar: false,
        });
    }

    handleClickSubstract = () => {
        if(this.state.count != 0) {
            this.setState({
                count: this.state.count - 1,
            });
        } else {
            this.setState({
                mostrar: true,
            })
        }
    }

    clean = () => {
        this.setState({
            count: 0,
            mostrar: false,
        });
    }



    render() {
        const { count } = this.state;
        return(
            <div>
                <h1>Manzanas: {count}</h1>
                {this.state.mostrar && <h1>Ya no hay manzanas</h1>}
                <button type="button" onClick={this.handleClickAdd}>
                    Agregar
                </button>
                <button type="button" onClick={this.handleClickSubstract}>
                   Quitar 
                </button>
                <button type="button" onClick={this.clean}>
                    Limpiar
                </button>
            </div>
        );
    }

Cristian Orozco Benjumea

student•

Genail!!!! Yo le quitaría el atributo de mostrar y mi función de disminuir lo dejaría así:

handleClickLess = () => {
    this.state.count !== 0 && this.setState({ count:this.state.count - 1}) 
  }

Irvin Fiz

student•

para modificar directamente el state del componente se utiliza una función flecha (arrow function), si se utiliza una función normal, se tendría que hacer un bind.

Luis Rafael Viñas Gómez

student•

Yo hice un botón para regalar manzanas, una validación y un if ternario para presentar el contador. Quedo de esta manera:

import React from 'react'

class Button extends React.Component {

  state = {
    count: 0
  }

  addApple = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  giftApple = () => {
    if (this.state.count <= 0) {
      alert('Ya no posees manzanas para regalar')
      return false
    }

    this.setState({
      count: this.state.count - 1
    })
  }

  render() {
    const { count } = this.state

    return(
      <div>
        {
          !count
          ? <h3>No tienes manzanas para regalar</h3>
          : <h3>Tienes { count } manzanas</h3>
        }
        <button type='button' onClick={this.addApple}>
          Agregar manzanas
        </button>
        <button type='button' onClick={this.giftApple}>
          Regalar manzanas
        </button>
      </div>
    )
  }
}

export default Button

Stiven Jiménez

student•

esta muy cool !!

Mayerly Prieto Muñoz

student•

Muy duro!!

Alondra Castro

student•

Me encanta el humor, "Es momento de hacer cosas geniales". Gracias Oscar!

Mauricio Lopez Agudelo

student•

Hola, estoy tratando de realizar lo mismo del curso con hooks, si alguien pueda decirme si esta correcto o pueda hacerlo de manera distinta, mas optima, etc... gracias!

import React, { useState } from "react";

const Button = () => {
  const [state, setState] = useState(0);

  return (
    <div>
      <h1>Manzanas es igual a : {state}</h1>
      <button onClick={() => setState(state + 1)} type="button">
        text
      </button>
    </div>
  );
};

export default Button;

John Andrey Serrano

student•

De esa forma esta bien y me parece optima.

Jorge Velasquez

student•

Ejemplo state con un carrito de compras

import React from "react";
import { MdAddShoppingCart } from "react-icons/md";

const SIZE = "42px";

class Button extends React.Component {
  state = {
    count: 0
  };
  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    });
  };
  handleClickr = () => {
    this.setState({
      count: this.state.count - 1
    });
  };

  render() {
    const { count } = this.state;
    return (
      <>
        <div className="carrito">
          <MdAddShoppingCart size={SIZE} /> {count}
        </div>
        <div className="button-container">
          <button
            className="button-agregar"
            type="button"
            onClick={this.handleClick}
          >
            Agregar frutas
          </button>
          <button
            className="button-restar"
            type="button"
            onClick={this.handleClickr}
          >
            Restar frutas
          </button>
        </div>
      </>
    );
  }
}

export default Button;

Sebastian Andres Barrero Sanchez

student•

Adelantándome y practicando más con Hooks 🤓.

import React, { useState } from "react";

export default function Button() {
  const [count, setCount] = useState(0);
  return (
    <>
      <h1>Manzanas :{count}</h1>
      <button type="button" 
        onClick={() => setCount(prevCount => prevCount + 1)}>
        Click
      </button>
    </>
  );
}

Pablo César Escobar

student•

Los eventos que he manejado en HTML son:

onBlur: El elemento ha perdido el foco (foco de salida).
onFocusout:El elemento ha perdido el foco (y permite bubble).
onFocus:El elemento ha ganado el foco (foco de entrada).
onFocusin: El elemento ha ganado el foco (y permite bubble).
onClick: El usuario ha pulsado y soltado el elemento

Daniel Lopez

student•

este profesor explica muy pero muy bn.

Sebastián Gonzalez Quintero

student•

Propiedades

onresize: Para tener en cuenta cuando se redimensiona la pantalla, si programas un juego con canvas y quieres que el canvas sea de las dimensiones de toda la ventana.

Teclado

onkeypress: Para obtener las teclas que se han presionado.
onkeydown: Detectar el momento exacto en que una tecla esta siendo presionada.
onkeyup: Detectar el momento exacto en que una tecla es soltada.

Puntero

onmousemove: Para obtener la posición (x, y) del puntero en el elemento.
onmousedown: Para detectar que el botón izquierdo está siendo presionado.
onmouseup: Para detectar que el botón izquierdo ha sido soltado.
onmouseover: Para detectar que el puntero está dentro de un elemento.
onmouseout: Para detectar que el puntero está ha salido de un elemento.

Imagen

onload: En las imágenes para hacer una precarga de las imágenes.
onerror: Para detectar un problema al cargar una imagen.

WebSocket

onmessage: No tanto HTML, más bien WebSocket para obtener los mensajes recibidos.

Formularios

onchange: Para verificar cuando un input cambia.
onsubmit: Para formularios, saber cuando se presiona el botón submit.
onfocus: Para detectar cuando se ha seleccionado (sin que sea presionado necesariamente, usando tabulación por ejemplo) un botón o un campo de entrada.
onblur: Para detectar cuando el botón o campo ha perdido la selección.

Referencia [1] w3schools.com

Jose Anibal Garcia Giraldo

student•

También podemos sumar 1 de esta forma :D

Javier Fuentes Mora

teacher•

Cual es la diferencia de hacerlo asi ?


class Button extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        count: 0
      };
    }
    handleClick=()=>{
        this.setState({
            count:this.state.count + 1

        })
    }
    render() {
        const {count} = this.state;

        return (
            <div>
                <h1>Manzanas {count}</h1>
                <button type="button" onClick={this.handleClick}>Agregar</button>
                
            </div>
        )
        }
  }

John Andrey Serrano

student•

En funcionalidad ninguna diferencia lo unico diferente es que la forma que uso el profesor es mas nueva y la del constructor es mas vieja, creo que aun la forma del profesor esta en fase experimental no estoy seguro.

Franklin Pineda

student•

onchange con radiobutton y checkbox para trabajar con valores booleano

David Behar

student•

¿Por qué se utilizó una arrow function envés de una función normal?

Edwin García

student•

Creo que si usa una función normal tendría que hacer el binding de esa función en el método constructor para que no pierda el contexto.

Douglas Vásquez

student•

En este caso la función handleClick la pasaremos dentro del objeto onClick en el cual this ya no haría referencia al objeto Button, sino que haría referencia al objeto onClick ya que es llamada como callback por este objeto. En ese caso la solución sería usar bind(this) al final de la función. Sin embargo es más directo y útil usar arrow function para evitar ese problema. Al menos así lo entiendo yo hasta ahora. Saludos.

Ana Karina Vergara Guzmán

student•

¿Alguien sabe porque sale este error?

Francisco Ponce

student•

Hola Karina

Recuerda que al momento de renderizar el arbolito del DOM Virtual de React state por sí solo es como si no existiera a ese state si no mal recuerdo le hace falta la palabra this. para hacer referencia al estado del componente Button. ¿Podrías confirmarme si eso arregla el problema?

Lo sé a mi me pasa mucho al aprender React, ya que puede ser un poco más permisivo y accesible que otros frameworks pero eso no lo hace más sencillo.

Paolo Donato Torregrosa Navarro

student•

¿Porque es necesario el uso de arrow functions dentro de los componentes? ¿O también se pueden utilizar las funciones normales de ES5?

Tomás Herrou

student•

No es necesario, pero si útil. Siempre que se codea, se especula con que otra persona en algún momento va a tener que usarlo y las arrow function por convención son más utilizadas.

Christian Armando Consuelo Mayén

student•

Definitivamente es posible utilizar definición de funciones con function pero las arrow functions suelen ser más limpias y puede ahorrarte la necesidad de forzar el valor de this con funciones como bind en el constructor.

Armando Duarte Quiñones

student•

submit para manejar barras de busquedad, focus para cambiar en fondo de un input, blur, keydown y keyup mas que nada para probar eventos

Royer Guerrero Pinilla

student•

Me emocione mucho cuando le daba al click, XD

		return (
			&lt;div&gt;
				&lt;h1&gt;
					🍎: {count}
					{count === 0 ? (
						&lt;p&gt;No hay manzanas&lt;/p&gt;
					) : count === 1 ? (
						&lt;p&gt;manzana&lt;/p&gt;
					) : (
						&lt;p&gt;manzanas&lt;/p&gt;
					)}
				&lt;/h1&gt;
				&lt;button type='button' onClick={this.handleClick}&gt;
					Agregar
				&lt;/button&gt;
			&lt;/div&gt;
		);

state = {
        count : 0,
        mostrar: false,
    }

    handleClickAdd = () => {
        this.setState({
            count: this.state.count + 1,
            mostrar: false,
        });
    }

    handleClickSubstract = () => {
        if(this.state.count != 0) {
            this.setState({
                count: this.state.count - 1,
            });
        } else {
            this.setState({
                mostrar: true,
            })
        }
    }

    clean = () => {
        this.setState({
            count: 0,
            mostrar: false,
        });
    }



    render() {
        const { count } = this.state;
        return(
            <div>
                <h1>Manzanas: {count}</h1>
                {this.state.mostrar && <h1>Ya no hay manzanas</h1>}
                <button type="button" onClick={this.handleClickAdd}>
                    Agregar
                </button>
                <button type="button" onClick={this.handleClickSubstract}>
                   Quitar 
                </button>
                <button type="button" onClick={this.clean}>
                    Limpiar
                </button>
            </div>
        );
    }

import React from 'react'

class Button extends React.Component {

  state = {
    count: 0
  }

  addApple = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  giftApple = () => {
    if (this.state.count <= 0) {
      alert('Ya no posees manzanas para regalar')
      return false
    }

    this.setState({
      count: this.state.count - 1
    })
  }

  render() {
    const { count } = this.state

    return(
      <div>
        {
          !count
          ? <h3>No tienes manzanas para regalar</h3>
          : <h3>Tienes { count } manzanas</h3>
        }
        <button type='button' onClick={this.addApple}>
          Agregar manzanas
        </button>
        <button type='button' onClick={this.giftApple}>
          Regalar manzanas
        </button>
      </div>
    )
  }
}

export default Button

import React, { useState } from "react";

const Button = () => {
  const [state, setState] = useState(0);

  return (
    <div>
      <h1>Manzanas es igual a : {state}</h1>
      <button onClick={() => setState(state + 1)} type="button">
        text
      </button>
    </div>
  );
};

export default Button;

import React from "react";
import { MdAddShoppingCart } from "react-icons/md";

const SIZE = "42px";

class Button extends React.Component {
  state = {
    count: 0
  };
  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    });
  };
  handleClickr = () => {
    this.setState({
      count: this.state.count - 1
    });
  };

  render() {
    const { count } = this.state;
    return (
      <>
        <div className="carrito">
          <MdAddShoppingCart size={SIZE} /> {count}
        </div>
        <div className="button-container">
          <button
            className="button-agregar"
            type="button"
            onClick={this.handleClick}
          >
            Agregar frutas
          </button>
          <button
            className="button-restar"
            type="button"
            onClick={this.handleClickr}
          >
            Restar frutas
          </button>
        </div>
      </>
    );
  }
}

export default Button;

import React, { useState } from "react";

export default function Button() {
  const [count, setCount] = useState(0);
  return (
    <>
      <h1>Manzanas :{count}</h1>
      <button type="button" 
        onClick={() => setCount(prevCount => prevCount + 1)}>
        Click
      </button>
    </>
  );
}

class Button extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        count: 0
      };
    }
    handleClick=()=>{
        this.setState({
            count:this.state.count + 1

        })
    }
    render() {
        const {count} = this.state;

        return (
            <div>
                <h1>Manzanas {count}</h1>
                <button type="button" onClick={this.handleClick}>Agregar</button>
                
            </div>
        )
        }
  }

State - Events

¿Qué es React JS?

Aprende qué es React.js

DOM, Virtual DOM y React DOM

Crear una Aplicación con React JS

Create React App y Tipos de Componentes

JSX: JavaScript + HTML

Props: Comunicación entre Componentes

¿Qué son los métodos del ciclo vida?

State - Events

Instalación y configuración de entorno

Agregando compatibilidad con todos los navegadores usando Babel

Configurar un entorno de trabajo profesional

Webpack: Empaquetando nuestros módulos

Webpack Dev Server: Reporte de errores y Cambios en tiempo real

Estilos con SASS

Configuración final: ESLint y Git Ignore

Arquitectura de componentes para Platzi Video

Llevar un diseño de HTML y CSS a React

Estructura del Header

Estilos del Header

Estructura y Estilos del Buscador

Estructura y Estilos de Carousel y Carousel Item

Estructura y Estilos del Footer

Añadiendo imágenes con Webpack

Imports, Variables y Fuentes de Google en Sass

Uso de una API de desarrollo (Fake API)

Creando una Fake API

React Hooks: useEffect y useState

Lectura React Hooks

Conectando la información de la API

Custom Hooks

PropTypes

Usar React Tools

Debuggeando React con React DevTools

Prepárate para lo que sigue