05.- Reactjs⚛️ [Renderizar elementos con state]


State nos ayuda a renderizar (renderear) partes específicas de nuestro programa sin tener que refrescar toda nuestra pagina, esta es la magia de reactjs.


import React, { Component } from 'react';

class Miclase extends Component {
    constructor(){
        super();
        this.state={
            count:1
        };
        this.clickBotones=this.clickBotones.bind(this);
    }

    componentDidMount(){
        this.setState({
            count:1
        });
    }

    clickBotones(e){
        if(e.target.id==="sumar"){
            this.setState({
                count:this.state.count+1
            });
        }
        else if(e.target.id==="restar" && this.state.count > 1 ){
            this.setState({
                count:this.state.count-1
            });
        }
        else if(e.target.id==="reiniciar"){
            this.setState({
                count:1
            });
        }
    }
    render (){
        return (
            <div className="contenido">
                <h2>Contador {this.state.count}</h2>
                <p>
                <button id="sumar" onClick={this.clickBotones}>+</button>
                <button id="restar" onClick={this.clickBotones}>-</button>
                <button id="reiniciar" onClick={this.clickBotones}>Reiniciar</button>
                </p>
            </div>
        );
    }
}

export default Miclase;











Comentarios

Facebook Like

Entri Populer

hackear wifi con kali linux 📡

Instalar Netbeans 10 en Windows 10

Instalar netbeans 10 en ubuntu 18.04