Theorie

Der TextInput-Komponente wird verwendet, um Benutzern die Eingabe von Text zu ermöglichen. Es bietet ein Texteingabefeld, in dem Benutzer Text eingeben, einfügen oder bearbeiten können, was es zu einer grundlegenden Komponente für das Sammeln von Benutzereingaben in Formularen, Suchleisten, Chat-Anwendungen und mehr macht.

Warum brauchen wir es?

1. Benutzer-Eingabeverarbeitung:
   • Ermöglicht Benutzern die Eingabe von Textdaten in Ihre Anwendung;
   • Wesentlich für das Sammeln von Informationen von Benutzern, wie Benutzernamen, Passwörter, Nachrichten, Suchanfragen und mehr.
2. Vielseitigkeit:
   • Kann angepasst und konfiguriert werden, um verschiedenen Eingabeanforderungen gerecht zu werden, einschließlich Tastaturtyp, Platzhaltertext, sicherer Texteingabe und Eingabevalidierung.

Wie man mit TextInput arbeitet

• Der TextInput kann über seine Eigenschaften und seinen Zustand gesteuert werden;
• Wir können Benutzerereignisse mithilfe von Rückruffunktionen abhören, die von der Komponente bereitgestellt werden, wie z.B. onChangeText.

Beispiel

Erklärung

• Wir verwenden den useState Hook, um zwei Zustandsvariablen zu verwalten: name und welcomeMessage. name speichert den vom Benutzer eingegebenen Text, während welcomeMessage die Nachricht speichert, die oben auf dem Bildschirm angezeigt wird;
• Die Funktion handleNameChange wird aufgerufen, wann immer der Benutzer seinen Namen im TextInput-Komponente eingibt oder bearbeitet. Sie aktualisiert den name Zustand mit dem neuen Eingabewert;
• Die Funktion handleNameSubmission wird aufgerufen, wenn der Benutzer seinen Namen übermittelt.
  1. Zuerst wird überprüft, ob der eingegebene Name nicht leer ist (mithilfe von trim(), um führende und nachfolgende Leerzeichen zu entfernen);
  2. Wenn der eingegebene Name nicht leer ist, wird der welcomeMessage Zustand aktualisiert, um eine personalisierte Willkommensnachricht anzuzeigen ("Willkommen, [name]!");
  3. Anschließend wird der name Zustand geleert, indem er auf einen leeren String gesetzt wird, wodurch die TextInput-Komponente für die nächste Eingabe in einen leeren Zustand zurückgesetzt wird;
  4. Wenn der eingegebene Name leer ist, wird der welcomeMessage Zustand aktualisiert, um den Benutzer aufzufordern, seinen Namen einzugeben ("Bitte geben Sie Ihren Namen ein.").

Ergebnis

In der Praxis