Mobile Apps6 - React Native Teil 2Eingabe mit TextInput

Eingabe mit TextInput

💡

Dauer: 45 Minuten (abhängig von Zeit für Flexbox)

  • TextInput für neue Todos einbinden
  • TextInput stylen
  • Zustand im TextInput

TextInput für neue Todos einbinden

Mit TextInput gibt es in React Native eine Komponente für die Eingabe von Text. Ein TextInput soll im Modal werden. Mit dem Prop placeholder kann das Eingabefeld beschriftet werden.

// components/TodoModal.js: TextInput importieren
import {
  Button,
  Modal,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
// der restliche Code bleibt gleich
 
export default function TodoModal({ visible, onCancel }) {
  return (
    <Modal
      animationType="slide"
      visible={visible}
      onRequestClose={onCancel}
    >
      <View style={styles.container}>
        <View style={styles.content}>
          <Text style={styles.text}>Todo hinzufügen</Text>
          <TextInput placeholder="Todo eingeben" />
          <View style={styles.buttons}>
            <Button title="Abbrechen" onPress={onCancel} />
            <Button title="Speichern" onPress={() => {}} />
          </View>
        </View>
      </View>
    </Modal>
  );
}

TextInput stylen

Damit TextInput besser sichtbar und bedienbar ist, ergänzen wir diesen mit ein paar Styles für die Schriftgröße, Abstände und einen farbigen Rand:

// der restliche Code bleibt gleich
<TextInput
  style={styles.input}
  placeholder="Todo eingeben"
/>
 
const styles = StyleSheet.create({
  // die restlichen Styles bleiben gleich
  input: {
    borderWidth: 1,
    borderColor: 'orange',
    borderRadius: 5,
    fontSize: 24,
    padding: 10,
    marginVertical: 20,
    width: '90%',
  },
});

Zustand im TextInput

Um den eingegebenen Text im TextInput zu speichern, benötigen wir state.

// components/TodoModal.js: useState importieren
import { useState } from 'react';
// der restliche Code bleibt gleich
 
// state deklarieren
export default function TodoModal({ visible, onCancel }) {
  const [todo, setTodo] = useState('');
 
  // der restliche Code bleibt gleich
 
  // state im TextInput verwenden:
  <TextInput
    style={styles.input}
    placeholder="Todo eingeben"
    value={todo}
    onChangeText={setTodo}
  />
}

Nun wird der eingegebene Text im TextInput im state gespeichert.

Todo der Liste hinzufügen

Nun implementieren wir das Verhalten des „Speichern“-Buttons im TodoModal.

Wie erweitern TodoModal mit einem Prop onSave, der den Callback für das Speichern des Todos von der Elternkomponente erhalten wird:

export default function TodoModal({ visible, onCancel, onSave }) {
// usw.
}

Danach wird der onSave-Prop im Button-Element des Modals verwendet:

<Button title="Speichern" onPress={() => onSave(todo)} />

onSave wird mit dem aktuell im TextInput gespeicherten Text aufgerufen, der sich im Zustand bzw. state mit Namen todo befindet.

In der Elternkomponente App müssen wir drei Anpassungen vornehmen:

  • todos in data umbenennen, weil wir den Namen todos gleich an anderer Stelle benötigen:
const data = [
  { id: 1, text: 'Einkaufen' },
  { id: 2, text: 'Sport' },
  { id: 3, text: 'React Native lernen' },
];
  • Am Anfang von App einen neuen State todos mit data initialisieren:
export default function App() {
  const [modalVisible, setModalVisible] = useState(false);
  const [todos, setTodos] = useState(data);
  // usw.
}

Der state todos wird an TodoList übergeben:

<TodoList todos={todos} />
  • den prop onSave für TodoModal als Funktion implementieren, die ein neues Todo in den State todos hinzufügt:
<TodoModal
  visible={modalVisible}
  onCancel={() => setModalVisible(false)}
  onSave={(todo) => {
    setTodos([...todos, { text: todo, id: todos.length + 1 }]);
    setModalVisible(false);
  }}
/>

In React Native kommt es häufig vor, dass wir einen state in einem Eltern-Element verwalten und diesen dann an ein Kind-Element übergeben. Das Kind-Element kann dann den state nicht verändern, sondern muss den Eltern-Element mitteilen, dass sich etwas geändert hat. Dies geschieht über eine Funktion, die wir dem Kind-Element als Prop übergeben (siehe oben im onSave-Prop).

Nun sollte ein neues Todo im Modal eingegeben und mit „Speichern“ hinzugefügt werden können.

Weitere Aufgaben

  • TextInput-Feld nach erfolgtem Speichern oder Abbrechen leeren
  • Validierung der Eingabe (leeren String vermeiden, Whitespace mit trim entfernen, …)
  • TextInput mit returnKeyType versehen, damit die Eingabe mit der „Return“-Taste abgeschlossen werden kann
Buttons und ModalNächste Schritte