From 048120adae7090b348a149d1d4e7292dbf4f70a0 Mon Sep 17 00:00:00 2001
From: e560248 <steffen.schoene@sbb.ch>
Date: Mon, 7 Apr 2025 15:07:00 +0200
Subject: [PATCH] different form examples

---
 react-advanced-tag1/src/App.css               |  5 ++
 .../exercises/RefExercise/index.tsx           | 69 +++++++++++++++++++
 2 files changed, 74 insertions(+)
 create mode 100644 react-advanced-tag1/src/components/exercises/RefExercise/index.tsx

diff --git a/react-advanced-tag1/src/App.css b/react-advanced-tag1/src/App.css
index b9d355d..59657e8 100644
--- a/react-advanced-tag1/src/App.css
+++ b/react-advanced-tag1/src/App.css
@@ -40,3 +40,8 @@
 .read-the-docs {
   color: #888;
 }
+
+input[type="text"] {
+  border-radius: 6px;
+  padding: 1rem 0.5rem;
+}
diff --git a/react-advanced-tag1/src/components/exercises/RefExercise/index.tsx b/react-advanced-tag1/src/components/exercises/RefExercise/index.tsx
new file mode 100644
index 0000000..4e4b915
--- /dev/null
+++ b/react-advanced-tag1/src/components/exercises/RefExercise/index.tsx
@@ -0,0 +1,69 @@
+import { FormEvent, useRef, useState } from "react";
+
+export default function RefExercise(): React.ReactElement {
+    console.log("RefExercise rendered");
+
+    const emailRef = useRef<HTMLInputElement>(null);
+    const passwordRef = useRef<HTMLInputElement>(null);
+
+    const handleSubmit = () => {
+        console.log("submit", {
+            email: emailRef.current?.value,
+            password: passwordRef.current?.value
+        });
+        passwordRef.current?.focus();
+    }
+
+    const [formData, setFormData] = useState({
+        strasse: "",
+        city: ""
+    });
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setFormData({
+            ...formData,
+            [event.target.name]: event.target.value
+        });
+    }
+
+    const handleChangeSubmit = () => {
+        const strasse = document.querySelector('input[name="strasse"]') as HTMLInputElement;
+        const city = document.querySelector('input[name="city"]') as HTMLInputElement;
+        console.log("submit", {
+            strasse: strasse.value,
+            city: city.value
+        });
+    }
+    
+    function handleFormSubmit(e: FormEvent) {
+        e.preventDefault();
+        const data = new FormData(e.target as HTMLFormElement);
+        console.log('handleFormSubmit', {
+            email: data.get('email'), 
+            password: data.get('password')
+        });
+      }
+    return (
+        <div style={{ display: "flex", flexDirection: "column", gap: "3rem" }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+            <h3>values by ref</h3>
+            <input type="text" placeholder="email" ref={emailRef}/>
+            <input type="text" placeholder="password" ref={passwordRef}/>
+            <button onClick={handleSubmit}>Submit</button>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+            <h3>change event (bad way, but validation is possible)</h3>
+            <input type="text" name="strasse" placeholder="Strasse" onChange={handleChange} />
+            <input type="text" name="city" placeholder="Stadt" onChange={handleChange}/>
+            <button onClick={handleChangeSubmit}>submit</button>
+
+        </div>
+        <form onSubmit={handleFormSubmit} style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+            <h3>By Form Event</h3>
+            <input type="text" name="email" placeholder="Email" />
+            <input type="text" name="password" placeholder="password" />
+            <button type="submit">Send</button>
+        </form>
+        </div>
+    );
+}
\ No newline at end of file