Composants contrôlés

Mon, 01 Jan 0001 00:00:00 +0000

Lorsqu’on crée un formulaire en HTML, les champs ,

, ou <select> gèrent généralement leur propre état (ce qu’on appelle des composants non contrôlés).
En React, la bonne pratique est d’utiliser des composants contrôlés :
Cela signifie que c’est React qui garde le contrôle sur la valeur du champ, grâce au state.
En quoi est-ce pertinent d’utiliser des composants contrôlés ? On peut synchroniser l’interface utilisateur (UI) avec des données internes. On peut valider, filtrer ou transformer les données au fur et à mesure que l’utilisateur tape. On garde le plein contrôle sur la logique du formulaire. Exemple simple Voici un champ de texte contrôlé par React :
</article>
<article>
<h1>Écouteurs d'évènements</h1>
<p>Mon, 01 Jan 0001 00:00:00 +0000</p>
En Javascript, on utilise des écouteurs d’évènenements (Event Listeners) pour permettre à l’utilisateur d’interagir avec notre application.
Dans une application Javascript “vanille”, il y a 2 façons d’ajouter des événements :
Avec la méthode .addEventListener() : <button id="btn"> const btn = document.getElementById('btn'); function handleClick() { console.log("Le bouton a été cliqué"); } btn.addEventListener("click", handleClick); Avec onclick="fonction()" sur l’élément HTML qu’on veut écouter : <button onclick="fonction()"> function fonction() { // Tâche à faire quand le bouton est cliqué console.log("Le bouton a été cliqué"); } Cette deuxième méthode ressemble beaucoup à celle qu’on utilise avec React. Par exemple. Si on veut faire en sorte que, lorsque nous cliquons sur un bouton, quelque chose est affiché dans la console, il suffit simplement d’ajouter un onClick={fonction} au bouton. Contrairement à la méthode précédente, vous remarquerez qu’on utilise un C majuscule :
</article>
<article>
<h1>useState()</h1>
<p>Mon, 01 Jan 0001 00:00:00 +0000</p>
Props vs State Props fait référence aux propriétés transmises à un composant pour qu’il fonctionne correctement, de la même manière qu’une fonction reçoit des paramètres. Un composant recevant des props n’est pas autorisé à les modifier (i.e. il sont immuables). function addTwoNumbers(a, b) { // NE FAITES PAS ÇA a = 42 return a + b } console.log(addTwoNumbers(1, 2)) function Navbar(props) { // NE FAITES PAS ÇA props.logoIcon = "some-other-icon.png" } <Navbar logoIcon="spatula.png" /> State fait référence aux valeurs gérées par le composant, comme les variables déclarées à l’intérieur d’une fonction. Chaque fois que vous avez des valeurs changeantes qui doivent être sauvegardées/affichées, vous utiliserez probablement un state. Gestion de variables avec state Prenons un exemple pour comprendre l’utilité des states en React :
</article>
<article>
<h1>Formulaires</h1>
<p>Mon, 01 Jan 0001 00:00:00 +0000</p>
Un des outils permettant à une application dynamique de récupérer des données entrées par un utilisateur sont les formulaires. Ces données sont le plus souvent envoyées à un serveur (API) pour y être traitées.
Exemple de cas d’utilisation de formulaires :
Inscription à une application Connexion à un site Les bases  App.jsx index.css function App() { return ( <section className="container"> <h2>Inscription</h2> <form className="form"> <label htmlFor="email">Email :</label> <input type="email" id="email" name="email" placeholder="john-doe@exemple.com" /> <label htmlFor="password">Mot de passe :</label> <input type="password" id="password" name="password" /> <button className="submit-btn">Inscription</button> </form> </section> ) } export default App * { margin: 0; padding: 0; } body{ background-color: #2CA1CC; font-family: 'Roboto', sans-serif; } .container{ width: 400px; margin: auto; margin-top: 50px; padding-bottom: 30px; background-color: #fff; border-radius:5px; color: #1F1F1F; } .container h2 { padding: 20px; text-align: center; } .form { display: flex; flex-direction: column; margin: 10px 40px 0; } .form input { margin: 10px 0 20px; padding: 10px; width:90%; background-color: #EAEDF2; border: none; border-radius:3px; color:#A0A0A0; } .form textarea { resize: none; margin: 10px 0 20px; padding: 10px; width:90%; height: 15vh; background-color: #EAEDF2; border: none; border-radius:3px; color:#A0A0A0; } .form fieldset { display: flex; flex-direction: column; border: none; margin: 10px 0; } .form fieldset legend { margin-bottom: 5px; } .form fieldset input { width:fit-content; margin: 10px 10px 7px 2px; } .form fieldset label { width:fit-content; } .form .submit-btn { border:none; padding: 10px; border-radius:5px; color:#F7F6FF; cursor: pointer; width: 96%; margin-bottom:10px; margin-top: 20px; background-color: #19B8D6; height: 37px; } Toutes les entrées d’un formulaire doivent être à l’intérieur d’une balise <form>
</article>
<article>
<h1>Rendus conditionnels</h1>
<p>Mon, 01 Jan 0001 00:00:00 +0000</p>
Dans une application dynamique React, il est possible d’afficher du contenu sur la page en fonction de la valeur d’un state, en utilisant la technique du rendu conditionnel (conditionnal rendering).
Rendu conditionnel avec &&  App.jsx Joke.jsx jokesData.js import Joke from "./components/Joke" import jokesData from "/src/assets/jokesData" export default function App() { const jokeElements = jokesData.map(joke => { return ( <Joke key={joke.id} setup={joke.question} punchline={joke.punchline} /> ) }) return ( <div> {jokeElements} </div> ) } import {useState} from "react" export default function Joke(props) { const [isShown, setIsShown] = useState(false) function toggleShown() { setIsShown(prevShown => !prevShown) } return ( <div> {props.setup && <h3>{props.setup}</h3>} {isShown && <p>{props.punchline}</p>} <button onClick={toggleShown}>Show punchline</button> <hr /> </div> ) } export default [ { id: 1, question: "Que demande un zéro à un huit ?", punchline: "T'as mis une ceinture ?" }, { id: 2, question: "Pourquoi les souris n'aiment pas jouer aux devinettes ?", punchline: "Parce qu'elles ont peur de donner leur langue au chat !" }, { id: 3, question: "Pourquoi est-ce que les éléphants ne peuvent pas utiliser d'ordinateurs ?", punchline: "Parce qu'ils ont peur de la souris !" }, { id: 4, question: "Quel est le légume le plus explosif ?", punchline: "La grenade !" }, { id: 5, question: "Quel est le comble pour un électricien ?", punchline: "D'avoir les idées noires !" }, { id: 6, question: "Quel est le comble pour un vélo ?", punchline: "C’est de perdre les pédales !" }, ] Exercice 1 Modifiez le composant App() ci-dessous pour afficher le <h1> uniquement si le state unreadMessages n’est pas vide :
</article>
</main></body></html>

React dynamique :: App Web

Composants contrôlés