Schritt-für-Schritt-Anleitung: Implementierung der UI-Komponente QuoteInput

Schritt-für-Schritt-Anleitung: QuoteInput implementieren

1. Projekt öffnen

Öffnen Sie die Motivations-App-c in Snack oder lokal.

2. Neue Datei erstellen

Erstellen Sie im Ordner components die Datei QuoteInput.js.

Motivations-App/
│── components/
│   │── Header.js
│   │── QuoteDisplay.js
│   │── QuoteInput.js
│── App.js

3. QuoteInput.js implementieren

Fügen Sie folgenden Code in QuoteInput.js ein:

import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';

export default function QuoteInput({ onAddQuote }) {
  const [newQuote, setNewQuote] = useState('');

  const handleAddQuote = () => {
    if (newQuote.trim().length > 0) {
      onAddQuote(newQuote);
      setNewQuote('');
    }
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Eigenes Zitat hinzufügen"
        value={newQuote}
        onChangeText={setNewQuote}
      />
      <Button title="Zitat hinzufügen" onPress={handleAddQuote} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginVertical: 10,
  },
  input: {
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 5,
    padding: 10,
    marginBottom: 10,
  },
});

Funktionsweise:

• Stellt ein Eingabefeld und einen Button bereit.
• Verwendet lokalen State zur Speicherung der Eingabe.
• Übermittelt neue Zitate über onAddQuote an App.js.

4. QuoteInput in App.js einbinden

Importieren Sie die Komponente in App.js:

import QuoteInput from './components/QuoteInput';

Ersetzen Sie die bisherige Eingabelogik durch:

<QuoteInput onAddQuote={addQuote} />

Vorher:

<TextInput
  style={styles.input}
  placeholder="Eigenes Zitat hinzufügen"
  value={newQuote}
  onChangeText={setNewQuote}
/>
<Button title="Zitat hinzufügen" onPress={addQuote} />

5. App testen

1. Geben Sie ein neues Zitat ein.
2. Klicken Sie auf „Zitat hinzufügen“.
3. Prüfen Sie, ob das Zitat zur Liste hinzugefügt wird.
4. Prüfen Sie, ob das Eingabefeld geleert wird.

Fehlerbehebung:

• Konsolenmeldungen prüfen.
• Dateinamen und Struktur kontrollieren.
• Import in App.js überprüfen.

Erwartetes Ergebnis

• QuoteInput arbeitet unabhängig von anderen Komponenten.
• Neue Zitate werden korrekt übergeben und angezeigt.
• Das Eingabefeld wird nach dem Absenden zurückgesetzt.