Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:ffit:react:learningunits:lu02:forms [2024/12/19 07:33] – kdemirci
+++ modul:ffit:react:learningunits:lu02:forms [2024/12/19 11:50] (aktuell) – kdemirci
@@ Zeile 1: / Zeile 1: @@
 ====== LU02a - Simple Form ======
-Formulare in React sind eine grundlegende Möglichkeit, um Benutzereingaben zu erfassen und zu verarbeiten. Im Unterschied zu normalen HTML-Formularen werden die Eingaben von React über den State kontrolliert. Dadurch können Sie Eingaben validieren und dynamisch auf Änderungen reagieren.
-<code javascript>
+{{url>https://codesandbox.io/embed/t6tk7x?view=editor+%2B+preview&module=%2Fsrc%2FApp.js&hidenavigation=1 100%,500px}}
-import { useState } from 'react';
-export default function Formular() {
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    alert(`Gespeicherter Name: ${name}`);
-  };
-  return (
-    <form onSubmit={handleSubmit}>
-      <label>
-        Firstname:
-        <input
-          type="text"
-          value={firstName}
-          onChange={(e) => setFirstName(e.target.value)}
-        />
-      </label>
-      <label>
-        Lastname:
-        <input
-          type="text"
-          value={lastName}
-          onChange={(e) => setLastName(e.target.value)}
-        />
-      </label>
-      <button type="submit">Absenden</button>
-    </form>
-  );
-}
-</code>
-{{url>https://stackblitz.com/edit/ffit-react-lu02-simple-forms?embed=1&file=src%2FApp.jsx&hideExplorer=1&hideNavigation=1}}