15 Minutos de React JS – segunda parte

Nota: al final, el archivo completo con todos los componentes

Eventos

Vamos directamente al grano, con un ejemplo sencillo, definiendo un Componente ButtonToggle, el cual tiene un estado que se cambia cada vez que clickeamos en el.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

// Un ejemplo de manejador de eventos
class ButtonToggle extends React.Component {
    constructor(props) {
        super(props)

        // definimos el estado del componente, en este caso toggled
        this.state = {
            toggled : true
        }

        // importante esto, para tener el contexto de la class ButtonToggle
        //  dentro del handler, si no ponemos esto
        // cuando dentro de clickHandler querramos cambiar el estado de toggled
        // nos tirara un error porque `this` no estara definido en dicho contexto
        this.clickHandler = this.clickHandler.bind(this)
    }

    // este es el handler, no mucho que comentar
    clickHandler(e) {
        // e.preventDefault() // si quisieramos detener el comportamiento por defecto
        // e.stopPropagation() // si queremos parar la propagacion de eventos
        this.setState(state => ({
            toggled : !state.toggled
        }))
    }

    // notar el uso de camelCase en onClick, y que no usamos "", simplemente pasamos 
    // el metodo que se encargara de manejar el evento
    render() {
        return (
            <div>
                <button onClick={this.clickHandler.bind(this)}>
                    { this.state.toggled? "PRENDIDO!" : "apagado"}
                </button><br />
            </div>
        )
    }
}


ReactDOM.render(
    <ButtonToggle />,
    document.getElementById('app')
)

No hay mucho que decir en este código, bastante descriptivo por si mismo.
Más allá de resaltar lo comentado en el mismo: bindear this en el constructor, si no, no tenemos acceso en el handler a los métodos del componente.

Nota: lo que está en onClick podemos ponerlo de diferentes maneras, por ejemplo:

onClick={this.clickHandler}

o también

onClick={this.clickHandler.bind(this)}

pero elegí esta forma ya que me permite pasar argumentos a la función handler.
Aquí en este ejemplo no tenemos ninguno, pero en próximos los necesitaremos, así que prefiero ir incorporándolos desde el principio, y dejar el resto de formas como alternativas.

Renderizado Condicional

Algo que podemos agregar en este ejemplo es un renderizado condicional en el que, según el estado de toggled, nos muestra un componente u otro (por ejemplo, para mostrar un mensaje de login o logout), un poco ya estaríamos haciendo eso en este ejemplo, pero lo podemos hacer un poco mas complejo de la siguiente manera:

Primero creamos los 2 componentes LoginButton y LogoutButton, y las colocamos antes de la definicion de ButtonToggle.
Por que? esto no lo explique antes, pero los componentes que vayamos a utilizar deben estar previamente definidos.

class LoginButton extends React.Component {
    render() {
        return (
            <strong>Login</strong>
        )
    }
}


class LogoutButton extends React.Component {
    render() {
        return (
            <em>Logout</em>
        )
    }
}

y cambiamos el código de render de la class ButtonToggle por el siguiente:

    render() {
        const isLoggedIn = this.state.toggled;
        let label;
        if (isLoggedIn) {
            label = <LogoutLabel />;
        } else {
            label = <LoginLabel />;
        }

        return (
            <button onClick={this.clickHandler.bind(this)}>
                {label}
            </button>
        )
    }

Y como podemos ver, segun el estado de toggled renderiza un componente u otro

y esto es todo por hoy, puedes descargar el ejemplo completo aquí.
Hasta la proxima!