5 - HTML Inputs for Dynamic Content Changes

Author: codingforentrepreneurs

full_stack_python/full_stack_python.py

@@ -7,29 +7,32 @@
 
 class State(rx.State):
     """The app state."""
-    label = "This is my label"
-    orginal_label = "This is my label"
+    label = "Welcome to Reflex!"
 
-    def change_label(self):
-        if self.label == "Cool label.":
-            self.label = self.orginal_label
-        else:
-            self.label = "Cool label."
+    def handle_title_input_change(self, val):
+        self.label = val
+
+    def did_click(self):
+        print("Hello world did click")
 
 
 def index() -> rx.Component:
     # Welcome Page (Index)
     return rx.container(
         rx.color_mode.button(position="bottom-left"),
         rx.vstack(
-            rx.heading(State.label, " Welcome to Reflex!", size="9"),
+            rx.heading(State.label, size="9"),
             rx.text(
                 "Get started by editing ",
                 rx.code(f"{config.app_name}/{config.app_name}.py"),
-                on_click=State.change_label,
                 size="5",
             ),
-            # rx.button("Do something!", on_click=State.change_label),
+            # <input type='text' value='My value' />
+            rx.input(
+                default_value=State.label,
+                on_click=State.did_click,
+                on_change=State.handle_title_input_change
+            ),
             rx.link(
                 rx.button("Check out our docs!"),
                 href="https://reflex.dev/docs/getting-started/introduction/",