seance8 cours

C12 : Développer en Front-end S8 : Gestion des évènements(Events) Communication entre composant Cours

//callBack function import React from 'react' export default function Form() { function handleSubmit(e) { e.preventDefault();console.log('You clicked submit.');

return ( //callBack function <form onSubmit={handleSubmit}> <button type="submit">Submit</button> </form>

On peut utiliser les callBack et les Arrow fonctions pour gérer les évènements Exercice d’application 1

C12 : Développer en Front-end S8 : Gestion des évènements(Events) Communication entre composant Cours

Quand l’utilisateur clique sur Afficher s’affiche le message contenant le nom et le prenom Solution : import React, { useState } from "react"; export default function Inscription(){ const [nom,setNom]=useState() const [prenom,setPrenom]=useState() const [information,setInformation]=useState() function envoyer(){ setInformation(`nom:${nom} prenom:${prenom}`)

<div> <label>Nom:</label><input type="text" onChange={(e)=>{setNom(e.target.value.toUpperCase())}}/> </div> <div> <label>Prenom:</label><input type="text" onChange={(e)=>{setPrenom(e.target.value.toUpperCase())}}/> </div> <button onClick={envoyer}>Afficher</button> <p>{information}</p> </div>

Remarque importante : Si on remplace cette écriture <button onClick={envoyer}>Afficher</button> Par <button

Car envoyer est exécuter après chaque render de composant, de plus la méthode envoyer contient le code suivant : setInformation(`nom:${nom} prenom:${prenom}`)

C12 : Développer en Front-end S8 : Gestion des évènements(Events) Communication entre composant Cours

Exercice Application 2 : On peut valider les éléments input facilement en utilisant le Système gestion d’état de Rect. Essayons ça en créant un simple validateur de mot de passe. Ce dernier va être un input text qui nécessite l’utilisateur d’entrer un mot de passe qui contient au moins 4 caractères.

Si l’utilisateur entre un mot de passe moins de 4 caractères. un message d’erreur va être affiché «Password doit avoir au moins de 4 caractères"

Solution : Avec fonctionnel composant import React, { useState } from 'react' export default function Validator(){ const [password,setPassword]=useState('') return( <div> <div> <label>Entrer votre password:</label> <input type="password" value={password} onChange={(event)=>setPassword(event.target.value)}