Menu
Coddy logo textTech
COMMENCER À APPRENDRE
flag Fr iconFrançaisdown icon

Récapitulatif : Formulaires et Champs de Saisie

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 32 sur 42.

challenge icon

Défi

Moyen

Récapitulatif du chapitre. Créez un sélecteur de pseudonyme avec la boucle complète d'un composant contrôlé : tapez, observez le retour en direct, effacez.

  1. Rendez l'élément input (id="nick") contrôlé avec l'état nick, en commençant vide.
  2. Le paragraphe (id="meter") affiche N of 12 où N est la longueur actuelle du pseudonyme (par exemple, taper Coddy → 5 of 12), dérivée et non stockée.
  3. Le bouton id="clear" vide le pseudonyme, ainsi que la zone de texte correspondante.

Essayez vous-même

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>

Toutes les leçons de Les fondamentaux

1Découvrez React

Qu'est-ce que React ?Votre premier composantRègle du parent uniqueJSX n'est pas de l'HTMLRécapitulatif : Découvrez React

4Props

Que sont les props ?Passer des propsDeux propsMême composant, nouvelles donnéesLa prop ChildrenRécapitulatif : Props

7Conditions et Listes

Rendu ternaireAfficher avec &&Afficher une listeL'importance des clésFiltrer, puis mapperRécapitulatif : Conditions et Listes

2Expressions JSX

AccoladesCalculs entre accoladesAccolades dans les attributsAppel de fonctions dans JSXRécapitulatif : Expressions JSX

5État et événements

Qu'est-ce que l'état ?Compteur de clicsComptage par étapesBasculer avec l'étatÉtat indépendantRécapitulatif : État et événements

8Projet : Carte de profil

Étape 1 : Structure de la carteÉtape 2 : Carte avec propsÉtape 3 : Bouton LikeÉtape 4 : Interrupteur de suivi

3Composants

Éléments de baseVotre deuxième composantRéutiliser des composantsComposer une pageRécapitulatif : Composants

6Formulaires et Champs de Saisie

Champs de saisie contrôlésRépéter la saisieCompteur de caractèresBouton d'effacementRécapitulatif : Formulaires et Champs de Saisie