Skip to content
Snippets Groups Projects
Commit fca23bbe authored by Jean-Christophe's avatar Jean-Christophe
Browse files

placer l'état au plus haut

parent 94440dd2
No related branches found
No related tags found
No related merge requests found
......@@ -4,6 +4,7 @@ Ce dépôt contient le code utilisé en exemple dans le cours [https://www.fil.u
Plusieurs versions progressives du dépôt pour accompagner le cours.
## Mise en place
* récupérer le dépôt
* installer les paquets *Node.js* :
......@@ -60,6 +61,8 @@ où `tag` peut prendre comme valeur :
voir `/src/components/person.component.jsx`
* `v5.9` : mise en oeuvre de la fonction de nettoyage du `useEffect`, appel à chaque exécution du hook
voir `/src/components/person.component.jsx`
* `v6` : il faut remonter l'état et inversion du flux
voir `/src/components/delayButton.component.jsx` et `/src/components/personListingController.component.jsx`
Faire ```git checkout main``` pour revenir à la version finale.
......
button.changedelay {
border : solid thin #888;
border-radius : 6px;
}
button.changedelay:hover {
background-color : #888;
color : white;
border : solid thin #888;
}
import '../assets/style/changedelay.css';
const delayText = 'délai';
const DelayButton = ( { delay, changeDelay }) => {
const handleClick = () => changeDelay(delay);
return(
<button className="changedelay"
onClick= { handleClick }>
{ delayText } = { delay }
</button>
);
}
export default DelayButton;
\ No newline at end of file
......@@ -14,10 +14,7 @@ useEffect( () => {
console.log('timer is running');
}, delay);
}
return () => {
console.log(`cleanup ${delay}`);
clearInterval( timer.current );
}
return () => clearInterval( timer.current );
}, [started, delay] );
return (
......
import { useState } from 'react';
import PersonListing from './personListing.component.jsx';
import '../assets/style/displayController.css';
import PersonListing from './personListing.component.jsx';
import DelayButton from './delayButton.component.jsx';
const PersonListingController = ({ initialDelay = 250 }) => {
const [ closed, setClosed ] = useState(false);
......@@ -14,6 +16,13 @@ const PersonListingController = ({ initialDelay = 250 }) => {
const changeDelay = newDelay => setDelay(newDelay);
const buildDelayButtons = () => {
const delayButtons = [250, 1000, 3000].map(delay => <DelayButton delay={delay}
changeDelay={changeDelay}
key={delay} />);
return delayButtons;
}
if (closed)
return null;
// else
......@@ -23,9 +32,7 @@ const PersonListingController = ({ initialDelay = 250 }) => {
<button onClick= { startStop }>
{ started ? 'Stop' : 'Start'}
</button>
<button onClick= { () => changeDelay(250) }>Delay = 250</button>
<button onClick= { () => changeDelay(1000) }>Delay = 1000</button>
<button onClick= { closeComponent }>Close</button>
{ buildDelayButtons() }
</div>
<PersonListing
delay = { delay }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment