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