« Max reacjsex » : différence entre les versions
| Ligne 399 : | Ligne 399 : | ||
);</syntaxhighlight> | );</syntaxhighlight> | ||
Cette structure vous permet de gérer l’état local de chaque composant et de conditionner l’affichage de la ville en fonction de la saisie du code postal. Chaque composant est responsable de sa propre logique et de son rendu, ce qui facilite la maintenance et l’évolution de l’application. | Cette structure vous permet de gérer l’état local de chaque composant et de conditionner l’affichage de la ville en fonction de la saisie du code postal. Chaque composant est responsable de sa propre logique et de son rendu, ce qui facilite la maintenance et l’évolution de l’application. | ||
=== Exemple Ville from CodPos === | |||
Pour créer un composant <code>Ville</code> qui affiche une liste de villes provenant d’une API fictive et qui se base sur le <code>codePos</code> pour sélectionner la bonne ville, nous allons suivre les étapes suivantes : | |||
# '''Simuler une API''' : Nous allons simuler une API qui renvoie une liste de villes en fonction du <code>codePos</code>. | |||
# '''Composant <code>Ville</code>''' : Ce composant va récupérer les villes en fonction du <code>codePos</code> et afficher une liste déroulante (<code>select</code>) des villes correspondantes. | |||
# '''Mécanisme de Sélection''' : Lorsque le <code>codePos</code> change, le composant <code>Ville</code> va mettre à jour la liste des villes. | |||
Voici comment vous pourriez structurer cela : | |||
<span id="simulation-de-lapi"></span> | |||
=== Simulation de l’API === | |||
Nous allons créer une fonction qui simule un appel API pour récupérer les villes en fonction du <code>codePos</code>. | |||
<syntaxhighlight lang="jsx" line copy>// Simuler un appel API | |||
const fetchVillesByCodePos = async (codePos) => { | |||
// Simuler des données fictives | |||
const villesData = { | |||
'75001': ['Paris 1'], | |||
'75002': ['Paris 2'], | |||
'69001': ['Lyon 1'], | |||
'69002': ['Lyon 2'], | |||
// Ajoutez d'autres codes postaux et villes fictives ici | |||
}; | |||
// Simuler un délai de réponse de l'API | |||
return new Promise((resolve) => { | |||
setTimeout(() => { | |||
resolve(villesData[codePos] || []); | |||
}, 500); | |||
}); | |||
};</syntaxhighlight> | |||
<span id="composant-ville"></span> | |||
=== Composant <code>Ville</code> === | |||
Le composant <code>Ville</code> va utiliser le hook <code>useEffect</code> pour appeler la fonction <code>fetchVillesByCodePos</code> chaque fois que le <code>codePos</code> change. | |||
<syntaxhighlight lang="jsx" line copy>import React, { useState, useEffect } from 'react'; | |||
const Ville = ({ codePos }) => { | |||
const [villes, setVilles] = useState([]); | |||
const [selectedVille, setSelectedVille] = useState(''); | |||
useEffect(() => { | |||
const fetchVilles = async () => { | |||
if (codePos) { | |||
const villes = await fetchVillesByCodePos(codePos); | |||
setVilles(villes); | |||
setSelectedVille(villes[0] || ''); | |||
} | |||
}; | |||
fetchVilles(); | |||
}, [codePos]); | |||
const handleVilleChange = (e) => { | |||
setSelectedVille(e.target.value); | |||
}; | |||
return ( | |||
<div> | |||
{villes.length > 0 ? ( | |||
<select value={selectedVille} onChange={handleVilleChange}> | |||
{villes.map((ville, index) => ( | |||
<option key={index} value={ville}> | |||
{ville} | |||
</option> | |||
))} | |||
</select> | |||
) : ( | |||
<p>Aucune ville trouvée pour ce code postal.</p> | |||
)} | |||
</div> | |||
); | |||
}; | |||
export default Ville;</syntaxhighlight> | |||
<span id="intégration-dans-le-composant-adresse"></span> | |||
=== Intégration dans le Composant <code>Adresse</code> === | |||
Enfin, nous allons intégrer le composant <code>Ville</code> dans le composant <code>Adresse</code> et passer le <code>codePos</code> comme prop. | |||
<syntaxhighlight lang="jsx" line copy>import React, { useState } from 'react'; | |||
import Etage from './Etage'; | |||
import CodeAcces from './CodeAcces'; | |||
import CodePos from './CodePos'; | |||
import Ville from './Ville'; | |||
import Zone from './Zone'; | |||
const Adresse = () => { | |||
const [etage, setEtage] = useState(''); | |||
const [codeAcces, setCodeAcces] = useState(''); | |||
const [codePos, setCodePos] = useState(''); | |||
return ( | |||
<div> | |||
<Etage value={etage} onChange={(e) => setEtage(e.target.value)} /> | |||
<CodeAcces value={codeAcces} onChange={(e) => setCodeAcces(e.target.value)} /> | |||
<CodePos value={codePos} onChange={(e) => setCodePos(e.target.value)} /> | |||
{codePos && <Ville codePos={codePos} />} | |||
<Zone /> | |||
</div> | |||
); | |||
}; | |||
export default Adresse;</syntaxhighlight> | |||
<span id="explication"></span> | |||
=== Explication === | |||
* '''Appel API Simulé''' : La fonction <code>fetchVillesByCodePos</code> simule un appel API et renvoie une liste de villes en fonction du <code>codePos</code>. | |||
* '''Hook <code>useEffect</code>''' : Le composant <code>Ville</code> utilise <code>useEffect</code> pour appeler la fonction <code>fetchVillesByCodePos</code> chaque fois que le <code>codePos</code> change. | |||
* '''Liste Déroulante''' : Le composant <code>Ville</code> affiche une liste déroulante (<code>select</code>) des villes correspondantes au <code>codePos</code>. Si aucune ville n’est trouvée, un message est affiché. | |||
Cette approche permet de sélectionner dynamiquement les villes en fonction du code postal saisi par l’utilisateur. | |||
[[Category:Private]] | [[Category:Private]] | ||