composants non controlés et useRef

readme.md

@@ -67,7 +67,8 @@ où `tag` peut prendre comme valeur :
   voir `/src/components/personListingControls.component.jsx` et `/src/components/personListingController.component.jsx`  
 * `v6.2` : refactorisation des composants, on continue à "remonter l'état"  
    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.
 

src/assets/style/addPerson.css

+div.addPerson {
+  padding : 4px;
+  margin : 5px auto 0px 20px;
+  border : solid thin #BBB;
+  text-align : center;
+}
+div.addPerson input {
+  margin : 0px 5px;
+}

src/components/addPerson.component.jsx

+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

src/components/app.component.jsx

@@ -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(
         <div id="app">
             <PersonListingController
                 persons = { persons }
                 incrementAge = { incrementAge }
+                addPerson = { addPerson }
             />
             <PersonListingData
                 persons = { persons }

src/components/personListingController.component.jsx

@@ -9,6 +9,8 @@ const INITIAL_DELAY= 1000;
 
 const PersonListingController = ( props ) => {
 
+    const { addPerson } = props; 
+
     const [ closed, setClosed ] = useState(false);
     const [ started, setStarted ] = useState(false);
     const [ delay, setDelay ] = useState(INITIAL_DELAY);
@@ -40,6 +42,7 @@ const PersonListingController = ( props ) => {
                     changeDelay={changeDelay}
                     closeAction={closeComponent}
                     startStop={startStop}
+                    addPerson={addPerson}
                 />);
     }
 

src/components/personListingControls.component.jsx

 import '../assets/style/personControls.css';
 
 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 delayButtons = [250,1000,3000].map ( delay => <DelayButton delay = { delay }
@@ -21,6 +22,9 @@ const PersonListingControls = ( { started, closed, changeDelay, closeAction, sta
             <button onClick= { closeAction }>
                 { closed ? 'Open'  : 'Close' }
             </button>
+            <AddPerson
+                addPerson={ addPerson }
+            />
         </div>
     );    
 }