Haz clic y cambia: State y eventos

Antes de cualquier explicación, haz clic. Cada vez que pulses el botón de abajo, el número sube en 1. Al terminar esta lección podrás explicar cómo funcionan estas poco más de diez líneas de código.

import reflex as rx


class CounterState(rx.State):
    count: int = 0

    @rx.event
    def increment(self):
        self.count += 1


def counter_increment():
    return rx.hstack(
        rx.heading(CounterState.count, as_="h2"),
        rx.button("Increment", on_click=CounterState.increment),
    )

El código tiene tres partes.

Al pulsar el botón, increment se ejecuta en el servidor y, cuando count cambia, Reflex vuelve a dibujar por su cuenta solo las partes de la pantalla que usan ese valor. No hay ni una línea de código que modifique la pantalla directamente.

1-1. State: donde viven los datos que cambian (2 min)

Toda app tiene datos que cambian con el tiempo: el número de un contador, si el usuario ha iniciado sesión, los productos del carrito. En Reflex, estos datos se guardan en una clase State.

• Crea una clase que herede de rx.State y declara variables dentro. Estas variables se llaman Var (state var).
• Toda Var debe llevar su tipo (count: int) y puede tener un valor por defecto (= 0).

Para usar una Var en la interfaz, haz referencia a ella a través del nombre de la clase, como en MyState.count. Puedes pasarla como hijo o como valor de una prop.

class MyState(rx.State):
    count: int = 0
    color: str = "red"


def counter():
    return rx.hstack(
        # The heading `color` prop is set to the `color` var in MyState.
        rx.heading("Count: ", as_="h2", color=MyState.color),
        # The `count` var in `MyState` is passed as a child to the heading component.
        rx.heading(MyState.count, as_="h2"),
    )

Puedes usar la misma Var en varios componentes. Cuando su valor cambia, todos los lugares que la usan se actualizan a la vez.

1-2. Manejadores de eventos y @rx.event (2 min)

Los métodos definidos dentro del State que cambian los datos se llaman manejadores de eventos. Las props especiales de los componentes, como on_click, se llaman disparadores de eventos. Al conectar un disparador con un manejador, la pantalla responde a lo que hace el usuario.

1. El usuario pulsa el botón (se activa el disparador de eventos).
2. El manejador conectado se ejecuta en el servidor y cambia el State.
3. Reflex envía el State actualizado al navegador y la pantalla se vuelve a dibujar.

Te recomendamos poner siempre @rx.event encima de cada manejador. Con este decorador, tu editor y el verificador de tipos comprueban "cuántos argumentos, y de qué tipo, hay que pasarle a este manejador", y así detectas errores antes de tiempo.

1-3. Manejadores de eventos con argumentos (2 min)

Igual que cualquier función, un manejador puede recibir argumentos. Vamos a crear botones que suman 1 y 5 usando un único manejador.

class CounterState2(rx.State):
    count: int = 0

    @rx.event
    def increment(self, amount: int):
        self.count += amount


def counter_variable():
    return rx.hstack(
        rx.heading(CounterState2.count, as_="h2"),
        rx.button("Increment by 1", on_click=lambda: CounterState2.increment(1)),
        rx.button("Increment by 5", on_click=lambda: CounterState2.increment(5)),
    )

• Este ejemplo envuelve la llamada en un lambda, como en lambda: CounterState2.increment(1), para dejar claro que significa "al pulsar, llama pasando 1".
• Si escribes directamente on_click=CounterState2.increment(1), funciona exactamente igual. Ese código no ejecuta el manejador en ese momento: solo crea la información del evento, que dice "al pulsar, ejecútalo con amount=1". El código del manejador se ejecuta en el servidor cuando se pulsa el botón.

1-4. Cuando el disparador pasa un valor: on_blur (2 min)

on_click no le pasa ningún valor al manejador, pero hay disparadores que sí lo hacen. on_blur le pasa al manejador el texto escrito cuando el campo de texto pierde el foco (al hacer clic en otro sitio o pulsar Tab).

class TextState(rx.State):
    text: str = ""

    @rx.event
    def update_text(self, new_text: str):
        self.text = new_text


def text_input():
    return rx.vstack(
        rx.heading(TextState.text, as_="h2"),
        rx.input(default_value=TextState.text, on_blur=TextState.update_text),
    )

Ejercicios

1. Añade un manejador decrement a CounterState y crea un botón que reste 1 al número.
2. Añade un botón "Reset" a counter_variable que devuelva count a 0. ¿Podrías hacerlo con un manejador que reciba argumentos?
3. Prueba a usar on_change en lugar de on_blur. El título cambiará con cada letra que escribas.

Lista de comprobación de esta lección

• Sé explicar qué son el State, una Var, un manejador de eventos y un disparador de eventos.
• Sé hacer referencia a una Var en la interfaz con NombreClase.nombre_variable.
• Entiendo por qué el manejador no se ejecuta de inmediato aunque lo conecte a on_click pasándole un argumento.