Schritt-für-Schritt-Anleitung: Ereignisverarbeitung mit Button

👣 Schritt-für-Schritt-Anleitung: Ereignisverarbeitung mit Button 

In dieser Anleitung zeigen Sie der App, wie sie auf einen Button-Klick reagieren soll. Am Ende wird eine Beispiel-Fahrt (Dummy) gespeichert und angezeigt.

🔧 Schritt 1: Button-Text mit useState steuern

1. Öffnen Sie die Datei StartStopButton.js.
2. Importieren Sie useState oben in der Datei:

   import React, { useState } from 'react';

3. Erstellen Sie einen neuen Zustand aufzeichnungLäuft mit false als Startwert:

   const [aufzeichnungLäuft, setAufzeichnungLäuft] = useState(false);

4. Ändern Sie den Button-Text dynamisch:

   <Button title={aufzeichnungLäuft ? "Aufzeichnung stoppen" : "Aufzeichnung starten"} onPress={handlePress} />

🔁 Schritt 2: Status umschalten und Ereignis weitergeben

1. Ändern Sie die Funktion handlePress wie folgt:

   
   const handlePress = () => {
     setAufzeichnungLäuft(!aufzeichnungLäuft);
     if (aufzeichnungLäuft) {
       onStartStop(); // Nur beim Stoppen → Dummy-Fahrt hinzufügen
     }
   };

🧠 Schritt 3: Reaktion auf Stopp in App.js einbauen

1. Öffnen Sie App.js.
2. Entfernen Sie den TODO-Kommentar in handleStartStop und rufen Sie die Funktion addDummyFahrt auf:

   
   const handleStartStop = () => {
     addDummyFahrt(fahrten, setFahrten);
   };

👀 Schritt 4: Ergebnis kontrollieren

• Starten Sie Ihre App in Snack oder auf dem Gerät.
• Klicken Sie auf „Aufzeichnung starten“ → Text ändert sich.
• Klicken Sie auf „Aufzeichnung stoppen“ → Dummy-Fahrt erscheint in der Liste.

✅ Geschafft!

Sie haben erfolgreich die erste Ereignisverarbeitung eingebaut. Ab dem nächsten Auftrag speichern Sie echte Fahrten mit Uhrzeit und Distanz!