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

composants non controlés et useRef

parent 2c554ffe
No related branches found
No related tags found
No related merge requests found
...@@ -67,7 +67,8 @@ où `tag` peut prendre comme valeur : ...@@ -67,7 +67,8 @@ où `tag` peut prendre comme valeur :
voir `/src/components/personListingControls.component.jsx` et `/src/components/personListingController.component.jsx` voir `/src/components/personListingControls.component.jsx` et `/src/components/personListingController.component.jsx`
* `v6.2` : refactorisation des composants, on continue à "remonter l'état" * `v6.2` : refactorisation des composants, on continue à "remonter l'état"
voir `/src/components/app.jsx`, `/src/components/personListingData.jsx` voir `/src/components/app.jsx`, `/src/components/personListingData.jsx`
* `v7` : exemple de composant avec des élément *non contrôlés* par *React*
voir `/src/components/addPerson.jsx`
Faire ```git checkout main``` pour revenir à la version finale. Faire ```git checkout main``` pour revenir à la version finale.
......
div.addPerson {
padding : 4px;
margin : 5px auto 0px 20px;
border : solid thin #BBB;
text-align : center;
}
div.addPerson input {
margin : 0px 5px;
}
import { useRef } from 'react';
import '../assets/style/addPerson.css';
const DEFAULT_NAME = 'Anonymous';
const DEFAULT_AGE = 12;
const AddPerson = ( { addPerson } ) => {
const nameInputRef = useRef(null);
const ageInputRef = useRef(null);
const handleClick = () => {
const person = {
name: nameInputRef.current.value || DEFAULT_NAME,
age: parseInt(ageInputRef.current.value) || DEFAULT_AGE
};
addPerson(person);
clearFields();
}
const clearFields = () => {
nameInputRef.current.value = '';
ageInputRef.current.value = '';
}
return (
<div className="addPerson">
<input
type="text" placeholder="Name"
ref={nameInputRef}
/>
<input
type="number" min="0" placeholder="Age"
ref={ageInputRef}
/>
<button onClick={handleClick}>Add</button>
</div>
);
}
export default AddPerson;
\ No newline at end of file
...@@ -29,11 +29,18 @@ const incrementAge = (personId) => { ...@@ -29,11 +29,18 @@ const incrementAge = (personId) => {
}); });
} }
const addPerson = person => {
const newId = `A${persons.length + 1}`;
const newPerson = { ...person, id: newId };
setPersons(previousPersons => [...previousPersons, newPerson] );
}
return( return(
<div id="app"> <div id="app">
<PersonListingController <PersonListingController
persons = { persons } persons = { persons }
incrementAge = { incrementAge } incrementAge = { incrementAge }
addPerson = { addPerson }
/> />
<PersonListingData <PersonListingData
persons = { persons } persons = { persons }
......
...@@ -9,6 +9,8 @@ const INITIAL_DELAY= 1000; ...@@ -9,6 +9,8 @@ const INITIAL_DELAY= 1000;
const PersonListingController = ( props ) => { const PersonListingController = ( props ) => {
const { addPerson } = props;
const [ closed, setClosed ] = useState(false); const [ closed, setClosed ] = useState(false);
const [ started, setStarted ] = useState(false); const [ started, setStarted ] = useState(false);
const [ delay, setDelay ] = useState(INITIAL_DELAY); const [ delay, setDelay ] = useState(INITIAL_DELAY);
...@@ -40,6 +42,7 @@ const PersonListingController = ( props ) => { ...@@ -40,6 +42,7 @@ const PersonListingController = ( props ) => {
changeDelay={changeDelay} changeDelay={changeDelay}
closeAction={closeComponent} closeAction={closeComponent}
startStop={startStop} startStop={startStop}
addPerson={addPerson}
/>); />);
} }
......
import '../assets/style/personControls.css'; import '../assets/style/personControls.css';
import DelayButton from './delayButton.component.jsx'; import DelayButton from './delayButton.component.jsx';
import AddPerson from './addPerson.component.jsx';
const PersonListingControls = ( { started, closed, changeDelay, closeAction, startStop } ) => { const PersonListingControls = ( { started, closed, changeDelay, closeAction, startStop, addPerson } ) => {
const buildDelayButtons = () => { const buildDelayButtons = () => {
const delayButtons = [250,1000,3000].map ( delay => <DelayButton delay = { delay } const delayButtons = [250,1000,3000].map ( delay => <DelayButton delay = { delay }
...@@ -21,6 +22,9 @@ const PersonListingControls = ( { started, closed, changeDelay, closeAction, sta ...@@ -21,6 +22,9 @@ const PersonListingControls = ( { started, closed, changeDelay, closeAction, sta
<button onClick= { closeAction }> <button onClick= { closeAction }>
{ closed ? 'Open' : 'Close' } { closed ? 'Open' : 'Close' }
</button> </button>
<AddPerson
addPerson={ addPerson }
/>
</div> </div>
); );
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment