Klick, und es ändert sich: State und Events

Erst klicken, dann erklären. Wenn du auf den Button unten klickst, steigt die Zahl um 1. Am Ende dieser Lektion kannst du erklären, wie diese gut zehn Zeilen Code funktionieren.

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),
    )

Der Code besteht aus drei Teilen.

Wenn du auf den Button klickst, läuft increment auf dem Server. Sobald sich count ändert, zeichnet Reflex automatisch genau die Teile der Oberfläche neu, die diesen Wert verwenden. Code, der die Oberfläche direkt verändert, gibt es keine einzige Zeile.

1-1. State: der Ort für veränderliche Daten (2 Min.)

Jede App hat Daten, die sich mit der Zeit ändern: die Zahl eines Zählers, ob jemand eingeloggt ist, der Inhalt eines Warenkorbs. In Reflex legst du solche Daten in einer State-Klasse ab.

• Du erstellst eine Klasse, die von rx.State erbt, und schreibst darin deine Variablen. Diese Variablen heißen Vars (State-Vars).
• Eine Var braucht immer einen Typ (count: int) und kann einen Standardwert haben (= 0).

Um eine Var in der Oberfläche zu verwenden, sprichst du sie über den Klassennamen an, etwa MyState.count. Du kannst sie als Kind einsetzen oder als Wert einer Prop übergeben.

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"),
    )

Du kannst dieselbe Var in mehreren Komponenten verwenden. Ändert sich ihr Wert, ändern sich alle Stellen, die sie verwenden, gleichzeitig mit.

1-2. Event-Handler und @rx.event (2 Min.)

Methoden in einem State, die Daten verändern, heißen Event-Handler. Spezielle Props einer Komponente wie on_click heißen Event-Trigger. Verbindest du einen Trigger mit einem Handler, reagiert die Oberfläche auf die Aktionen der Nutzer.

1. Jemand klickt auf den Button (der Event-Trigger wird ausgelöst).
2. Der verknüpfte Event-Handler läuft auf dem Server und ändert den State.
3. Reflex schickt den geänderten State an den Browser, und die Oberfläche wird neu gezeichnet.

Das @rx.event über dem Handler solltest du immer hinzufügen. Mit diesem Decorator können Editor und Typprüfer kontrollieren, wie viele Argumente welchen Typs der Handler erwartet. So fallen Fehler schon vorher auf.

1-3. Event-Handler mit Argumenten (2 Min.)

Wie normale Funktionen können auch Handler Argumente entgegennehmen. Bauen wir Buttons, die um 1 und um 5 hochzählen, mit nur einem Handler.

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)),
    )

• Dieses Beispiel verpackt den Aufruf in ein lambda, etwa lambda: CounterState2.increment(1), damit klar wird: „Beim Klick mit 1 aufrufen.“
• Du kannst auch direkt on_click=CounterState2.increment(1) schreiben, das funktioniert genauso. Dieser Code führt den Handler nicht sofort aus, sondern erzeugt nur eine Event-Beschreibung: „Beim Klick mit amount=1 ausführen.“ Der Code des Handlers läuft erst beim Klick auf dem Server.

1-4. Wenn der Trigger einen Wert mitliefert: on_blur (2 Min.)

on_click übergibt dem Handler keinen Wert, es gibt aber auch Trigger, die einen mitliefern. on_blur übergibt dem Handler den eingegebenen Text, sobald das Eingabefeld den Fokus verliert (wenn du woanders hinklickst oder Tab drückst).

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),
    )

Übungen

1. Füge CounterState einen Handler decrement hinzu und baue einen Button, der die Zahl jeweils um 1 verringert.
2. Ergänze counter_variable um einen „Reset“-Button, der count auf 0 zurücksetzt. Schaffst du das mit einem Handler, der ein Argument entgegennimmt?
3. Verwende on_change statt on_blur. Jetzt ändert sich die Überschrift bei jedem Tastendruck.

Checkliste zu dieser Lektion

• Ich kann erklären, was State, Var, Event-Handler und Event-Trigger jeweils sind.
• Ich kann in der Oberfläche eine Var mit Klassenname.Variablenname ansprechen.
• Ich weiß, warum ein Handler nicht sofort ausgeführt wird, auch wenn ich ihn mit Argument an on_click übergebe.