Théorie

Le composant TextInput est utilisé pour permettre aux utilisateurs de saisir du texte. Il fournit un champ de saisie de texte où les utilisateurs peuvent taper, coller ou éditer du texte, ce qui en fait un composant fondamental pour collecter les saisies des utilisateurs dans les formulaires, les barres de recherche, les applications de chat, et plus encore.

Pourquoi en avons-nous besoin ?

1. Gestion de la saisie utilisateur :
   • Permet aux utilisateurs de saisir des données textuelles dans votre application ;
   • Essentiel pour recueillir des informations des utilisateurs, telles que les noms d'utilisateur, les mots de passe, les messages, les requêtes de recherche, et plus encore.
2. Polyvalence :
   • Peut être personnalisé et configuré pour répondre à divers besoins de saisie, y compris le type de clavier, le texte de l'espace réservé, la saisie de texte sécurisée et la validation de saisie.

Comment travailler avec TextInput

• Le TextInput peut être contrôlé via ses props et son état;
• Nous pouvons écouter les événements d'entrée utilisateur en utilisant les fonctions de rappel fournies par le composant, telles que onChangeText.

Exemple

Explication

• Nous utilisons le hook useState pour gérer deux variables d'état : name et welcomeMessage. name stocke le texte saisi par l'utilisateur, tandis que welcomeMessage stocke le message affiché en haut de l'écran ;
• La fonction handleNameChange est appelée chaque fois que l'utilisateur tape ou modifie son nom dans le composant TextInput. Elle met à jour l'état name avec la nouvelle valeur saisie ;
• La fonction handleNameSubmission est appelée lorsque l'utilisateur soumet son nom.
  1. Elle vérifie d'abord si le nom saisi n'est pas vide (en utilisant trim() pour supprimer les espaces en début et fin de chaîne) ;
  2. Si le nom saisi n'est pas vide, elle met à jour l'état welcomeMessage pour afficher un message de bienvenue personnalisé ("Welcome, [name]!") ;
  3. Elle efface ensuite l'état name en le définissant sur une chaîne vide, réinitialisant ainsi le composant TextInput à un état vide pour la prochaine saisie ;
  4. Si le nom saisi est vide, elle met à jour l'état welcomeMessage pour inviter l'utilisateur à entrer son nom ("Please enter your name.").

Résultat

En Pratique