Introduction

L’objectif de ce chapitre est de vous expliquer comment créer une “boite modale”, ici un petit formulaire qui s’ouvre à la demande, permettant de saisir ses coordonnées.

Application de base

1. Créez une application React.js de base, qui affiche un petit message de type It’s working!!.

2. Créez un fichier src/Modal.js dans lequel placer le code suivant, qui permet l’affichage d’un formulaire de saisie :

   import React from "react";
   
   export default function Modal(props) {
       function close() {
           console.log("close");
       }
   
   return (
       <div>
           <h1>Adding a new Person</h1>
           <form id='personForm' onSubmit={e => props.addPerson(e)}>
               <p>name<br/><input placeholder="Enter name" name="name" required="required"/></p>
               <p>password
                   <br/><input type="password" name="password" required="required"/></p>
               <div id="buttons">
                   <button type="submit">OK</button>
                   <button type="button" onClick={close}>Cancel</button>
               </div>
           </form>
       </div>
   );
   }

   Ce formulaire fait appel à deux fonctions :

   • close est une fonction du formulaire, elle servira à refermer le formulaire. Pour le moment, on se limite au renvoi d’un message dans la console.
   • addPerson est une fonction qui est passée en argument du composant <Modal>. Il doit donc être associé à l’appel de ce composant dans le composant appelant, dans notre cas, c’est le composant <App>.

3. Modifiez la fonction App (dans le fichier src/App.js) comme suit :

   function App() {
       function addPerson(e) {
           e.preventDefault();
           console.log('Add person !!', e.target.name.value);
       }
   
       return (
           <>
               <p> It's working !!</p>
               <div id="personModal">
                   <Modal addPerson={addPerson} buttonOpen={buttonOpen}/>
               </div>
           </>
       );
   }

   • La fonction addPerson se contente pour le moment d’écrire un message dans la console.
   • La fonction addPerson est passée en argument au composant <Modal>, qui peut donc l’utiliser.
   • Importez la feuille de style que vous téléchargez ici.
   • Testez votre application, vous remarquez que le formulaire apparaît toujours. L’objectif des étapes suivantes est de faire disparaître ce formulaire, pour qu’il n’apparaissent qu’à la demande.

4. Ajoutez le code suivant dans votre feuille de style :

   #personModal {
     display: none;
     /* Hidden by default */
     position: fixed;
     /* Stay in place */
     z-index: 1;
     /* Sit on top */
     left: 0;
     top: 0;
     width: 100%;
     /* Full width */
     height: 100%;
     /* Full height */
     overflow: auto;
     /* Enable scroll if needed */
     background-color: rgb(0, 0, 0);
     /* Fallback color */
     background-color: rgba(0, 0, 0, 0.4);
     /* Black w/ opacity */
   }

   • Remarquez que le formulaire disparaît, ce qui est dû à la propriété display:none.

5. Pour ouvrir le formulaire, il va falloir :

   • Créer un bouton dans le composant <App>
   • Donner la référence de ce bouton au formulaire. Le code de la fonction App est donc modifié comme suit :

   function App() {
       const buttonOpen = useRef(null);
       const modalElement = useRef(null);
       ...
       return (
           <>
               <div>
                   Pour ouvrir le formulaire
                   <button type="button" ref={buttonOpen}> cliquez ici</button>
               </div>
               <div id="personModal" ref={modalElement}>
                   <Modal addPerson={addPerson} buttonOpen={buttonOpen} modalElement={modalElement}/>
               </div>
            </>
       );
   }

   • Remarquez l’utilisation de useRef, qui évite d’en passer par getElementById(...) et donc de générer un code très difficile à maintenir.

6. Le formulaire reçoit ici la référence au bouton qui doit l’ouvrir, c’est dans la définition du formulaire que l’on définit l’action qui permet au formulaire de devenir visible. Dans la fonction Modal, on ajoute donc le code suivant :

   function open() {
       console.log("open");
   }
   
   useEffect(() => {
       props.buttonOpen.current.onclick = open;
   });

   • La fonction useEffect s’exécute à l’affichage du formulaire (même si son style est display:none). Cela permet d’associer une action à l’évènement click sur le bouton. Remarquez la syntaxe onclick avec un c minuscule.
   • Testez votre code, la fonction open affiche un message dans la console, pour le moment le formulaire n’apparaît toujours pas!!

7. Il reste aux fonctions open et close à agir sur le style pour que le formulaire puisse apparaître et disparaître à souhait :

   
   function close() {
       props.modalElement.current.style.display = 'none';
   }
   
   function open() {
       props.modalElement.current.style.display = 'block';
   }

8. Votre formulaire apparaît ou disparaît maintenant comme attendu. Seul le bouton OK ne fonctionne pas encore. Modifiez-le comme suit :

   function addPerson(e) {
       e.preventDefault();
       console.log('Add person !!', e.target.name.value);
       modalElement.current.style.display = 'none';
   }