« Max reacjsex » : différence entre les versions
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 62 : | Ligne 62 : | ||
==== '''B. Composants Contextuels (Réactivité Conditionnelle)''' ==== | ==== '''B. Composants Contextuels (Réactivité Conditionnelle)''' ==== | ||
< | <syntaxhighlight lang="jsx" line copy>/ components/formadresse/Ville.jsx | ||
export const Ville = ({ codePostal }) = | export const Ville = ({ codePostal }) => { | ||
const [ville, setVille] = useState( | const [ville, setVille] = useState(""); | ||
// Effet réactif : Chargement de la ville basé sur le code postal | // Effet réactif : Chargement de la ville basé sur le code postal | ||
useEffect(() = | useEffect(() => { | ||
if (codePostal) { | if (codePostal) { | ||
// Simule un appel API (ex: fetch(`/api/villes?cp=${codePostal}`)) | // Simule un appel API (ex: fetch(`/api/villes?cp=${codePostal}`)) | ||
setVille( | setVille("Paris"); // Valeur mockée | ||
} | } | ||
}, [codePostal]); // Dépendance réactive | }, [codePostal]); // Dépendance réactive | ||
return | return <ZoneTexte value={ville} onChange={setVille} />; | ||
};</ | }; | ||
};</syntaxhighlight> | |||
----- | ----- | ||
| Ligne 82 : | Ligne 83 : | ||
==== '''C. Gestion d’État Global (Contexte ou Redux)''' ==== | ==== '''C. Gestion d’État Global (Contexte ou Redux)''' ==== | ||
< | <syntaxhighlight lang="jsx" line copy>// contexts/AdresseContext.jsx | ||
import { createContext, useState } from 'react'; | import { createContext, useState } from 'react'; | ||
export const AdresseContext = createContext(); | export const AdresseContext = createContext(); | ||
export const AdresseProvider = ({ children }) = | export const AdresseProvider = ({ children }) => { | ||
const [adresse, setAdresse] = useState({ | const [adresse, setAdresse] = useState({ | ||
codePostal: | codePostal: "", | ||
ville: | ville: "", | ||
etage: | etage: "", | ||
// ... autres champs | // ... autres champs | ||
}); | }); | ||
return ( | return ( | ||
<AdresseContext.Provider value={{ adresse, setAdresse }}> | |||
{children} | {children} | ||
</AdresseContext.Provider> | |||
); | ); | ||
};</ | }; | ||
};</syntaxhighlight> | |||
----- | ----- | ||
| Ligne 107 : | Ligne 109 : | ||
==== '''D. Composant Principal (<code>Application</code>)''' ==== | ==== '''D. Composant Principal (<code>Application</code>)''' ==== | ||
< | <syntaxhighlight lang="jsx" line copy>// pages/Application.jsx | ||
import { AdresseProvider } from '../contexts/AdresseContext'; | import { AdresseProvider } from '../contexts/AdresseContext'; | ||
import { FormAdresse } from '../components/formadresse/FormAdresse'; | import { FormAdresse } from '../components/formadresse/FormAdresse'; | ||
import { Bouton } from '../components/common/Bouton'; | import { Bouton } from '../components/common/Bouton'; | ||
export const Application = () = | export const Application = () => { | ||
const [isFormValid, setIsFormValid] = useState(false); | const [isFormValid, setIsFormValid] = useState(false); | ||
// Logique de validation réactive (ex: vérifie si tous les champs sont remplis) | // Logique de validation réactive (ex: vérifie si tous les champs sont remplis) | ||
useEffect(() = | useEffect(() => { | ||
// Implémentez la validation ici | // Implémentez la validation ici | ||
setIsFormValid(true); // Mock | setIsFormValid(true); // Mock | ||
| Ligne 122 : | Ligne 124 : | ||
return ( | return ( | ||
<AdresseProvider> | |||
<FormAdresse /> | |||
<Bouton | |||
label= | label="Enregistrer" | ||
disabled={!isFormValid} // Désactivé si le formulaire est invalide | disabled={!isFormValid} // Désactivé si le formulaire est invalide | ||
onClick={() = | onClick={() => console.log("Sauvegarde...")} | ||
/ | /> | ||
</AdresseProvider> | |||
); | ); | ||
};</ | }; | ||
};</syntaxhighlight> | |||
----- | ----- | ||