{"id":5930,"date":"2024-09-13T09:24:51","date_gmt":"2024-09-13T09:24:51","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/changer-state-avec-evenements-react\/"},"modified":"2024-09-13T09:24:55","modified_gmt":"2024-09-13T09:24:55","slug":"changer-state-avec-evenements-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/changer-state-avec-evenements-react\/","title":{"rendered":"3.10 Changer le State avec les \u00c9v\u00e9nements en React"},"content":{"rendered":"\n<p><strong>Changer le State avec les \u00c9v\u00e9nements en React<\/strong> est une comp\u00e9tence essentielle pour quiconque d\u00e9veloppe des applications dynamiques avec React. Ma\u00eetriser cette comp\u00e9tence permet de cr\u00e9er des interfaces plus interactives et r\u00e9actives. D\u00e9couvrons comment manipuler le state en r\u00e9ponse aux \u00e9v\u00e9nements utilisateurs gr\u00e2ce \u00e0 des exemples concrets et d\u00e9taill\u00e9s.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>\u00c9v\u00e9nements et au State en React<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706057808?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>En React, le <strong>state<\/strong> est un objet utilis\u00e9 pour contenir des informations dynamiques qui peuvent changer au fil du temps. Manipuler le state de mani\u00e8re efficace permet de cr\u00e9er des applications interactives et dynamiques. Nous allons voir comment g\u00e9rer et mettre \u00e0 jour le state de notre application React en r\u00e9ponse \u00e0 divers \u00e9v\u00e9nements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un Composant avec du State en React<\/h3>\n\n\n\n<p>Pour commencer, nous allons cr\u00e9er un composant de base avec un state initial. React utilise la fonction <code>useState<\/code> pour d\u00e9finir et g\u00e9rer le state dans les composants fonctionnels. Ceci est un exemple de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Vous avez cliqu\u00e9 {count} fois<\/p>\n      <button onClick={() => setCount(count + 1)}>\n        Cliquez ici\n      <\/button>\n    <\/div>\n  );\n}\n\nexport default Counter;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9rer les \u00c9v\u00e9nements Utilisateur pour Mettre \u00e0 Jour le State<\/h3>\n\n\n\n<p>Pour r\u00e9agir aux \u00e9v\u00e9nements utilisateur, comme un clic sur un bouton, nous utilisons des gestionnaires d&rsquo;\u00e9v\u00e9nements. Dans l&rsquo;exemple ci-dessus, nous avons un gestionnaire d&rsquo;\u00e9v\u00e9nement <code>onClick<\/code> qui met \u00e0 jour le state en utilisant la fonction <code>setCount<\/code>. Voyons quelques exemples suppl\u00e9mentaires :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useState } from 'react';\n\nfunction Toggle() {\n  const [isOn, setIsOn] = useState(false);\n\n  return (\n    <div>\n      <p>La lumi\u00e8re est {isOn ? 'allum\u00e9e' : '\u00e9teinte'}<\/p>\n      <button onClick={() => setIsOn(!isOn)}>\n        {isOn ? '\u00c9teindre' : 'Allumer'}\n      <\/button>\n    <\/div>\n  );\n}\n\nexport default Toggle;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser le State pour Mettre \u00e0 Jour l\u2019Interface Utilisateur<\/h3>\n\n\n\n<p>Avec React, chaque mise \u00e0 jour du state entra\u00eene un rendu du composant, ce qui d\u00e9clenche une mise \u00e0 jour de l&rsquo;interface utilisateur. Prenons un autre exemple o\u00f9 nous mettons \u00e0 jour un texte en r\u00e9ponse \u00e0 une entr\u00e9e utilisateur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useState } from 'react';\n\nfunction TextInput() {\n  const [text, setText] = useState('');\n\n  return (\n    <div>\n      <input type=\"text\" value={text} onChange={(e) => setText(e.target.value)} \/>\n      <p>Vous avez saisi : {text}<\/p>\n    <\/div>\n  );\n}\n\nexport default TextInput;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Valider les Entr\u00e9es Utilisateur en Temps R\u00e9el<\/h3>\n\n\n\n<p>En utilisant le state, nous pouvons \u00e9galement valider les entr\u00e9es utilisateurs. Par exemple, nous pouvons valider une adresse e-mail en temps r\u00e9el :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useState } from 'react';\n\nfunction EmailValidator() {\n  const [email, setEmail] = useState('');\n  const [isValid, setIsValid] = useState(false);\n\n  const validateEmail = (e) => {\n    setEmail(e.target.value);\n    setIsValid(\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(e.target.value));\n  };\n\n  return (\n    <div>\n      <input type=\"text\" value={email} onChange={validateEmail} \/>\n      <p>L'adresse e-mail est {isValid ? 'valide' : 'invalide'}<\/p>\n    <\/div>\n  );\n}\n\nexport default EmailValidator;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d&rsquo;Utilisation du State<\/h3>\n\n\n\n<p>Pour approfondir votre compr\u00e9hension des \u00e9v\u00e9nements et du state en React, voici quelques exemples avanc\u00e9s qui d\u00e9montrent comment utiliser ces fonctionnalit\u00e9s efficacement.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Mise \u00e0 jour de Widgets Multiples<\/h4>\n\n\n\n<p>Imaginez une application o\u00f9 vous mettez \u00e0 jour plusieurs \u00e9l\u00e9ments de l&rsquo;interface en r\u00e9ponse \u00e0 un seul \u00e9v\u00e9nement. Voici un exemple o\u00f9 nous g\u00e9rons l&rsquo;affichage de l&rsquo;utilisateur et son \u00e2ge :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useState } from 'react';\n\nfunction UserCard() {\n  const [username, setUsername] = useState('');\n  const [age, setAge] = useState('');\n\n  return (\n    <div>\n      <input type=\"text\" placeholder=\"Nom\" value={username} onChange={(e) => setUsername(e.target.value)} \/>\n      <input type=\"number\" placeholder=\"\u00c2ge\" value={age} onChange={(e) => setAge(e.target.value)} \/>\n      <p>Nom : {username}<\/p>\n      <p>\u00c2ge : {age}<\/p>\n    <\/div>\n  );\n}\n\nexport default UserCard;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Synchronisation des Donn\u00e9es Entre Composants<\/h4>\n\n\n\n<p>Une partie essentielle du d\u00e9veloppement en React est la synchronisation des donn\u00e9es entre diff\u00e9rents composants. Par exemple, synchroniser une entr\u00e9e de texte dans un composant avec l&rsquo;affichage dans un autre :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useState } from 'react';\n\nfunction TextSync() {\n  const [text, setText] = useState('');\n\n  return (\n    <div>\n      <InputComponent text={text} setText={setText} \/>\n      <DisplayComponent text={text} \/>\n    <\/div>\n  );\n}\n\nfunction InputComponent({ text, setText }) {\n  return (\n    <input type=\"text\" value={text} onChange={(e) => setText(e.target.value)} \/>\n  );\n}\n\nfunction DisplayComponent({ text }) {\n  return (\n    <p>Texte saisi : {text}<\/p>\n  );\n}\n\nexport default TextSync;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Application dans un Projet R\u00e9el<\/h4>\n\n\n\n<p>Consid\u00e9rons une application pratique o\u00f9 un formulaire met \u00e0 jour plusieurs sections de la page en temps r\u00e9el, comme par exemple une inscription o\u00f9 les informations de profil sont compl\u00e9t\u00e9es instantan\u00e9ment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useState } from 'react';\n\nfunction ProfileForm() {\n  const [profile, setProfile] = useState({\n    name: '',\n    email: '',\n    bio: ''\n  });\n\n  const handleChange = (e) => {\n    const { name, value } = e.target;\n    setProfile((prevProfile) => ({\n      ...prevProfile,\n      [name]: value\n    }));\n  };\n\n  return (\n    <div>\n      <form>\n        <input name=\"name\" placeholder=\"Name\" value={profile.name} onChange={handleChange} \/>\n        <input name=\"email\" placeholder=\"Email\" value={profile.email} onChange={handleChange} \/>\n        <textarea name=\"bio\" placeholder=\"Bio\" value={profile.bio} onChange={handleChange} \/>\n      <\/form>\n      <ProfilePreview profile={profile} \/>\n    <\/div>\n  );\n}\n\nfunction ProfilePreview({ profile }) {\n  return (\n    <div>\n      <h2>Profile Preview<\/h2>\n      <p>Name: {profile.name}<\/p>\n      <p>Email: {profile.email}<\/p>\n      <p>Bio: {profile.bio}<\/p>\n    <\/div>\n  );\n}\n\nexport default ProfileForm;\n<\/code><\/pre>\n\n\n\n<p>Pour approfondir la ma\u00eetrise des \u00e9v\u00e9nements et du state en React, de nombreuses ressources externes sont disponibles. Par exemple, le <a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"noopener noreferrer\">site officiel de la documentation React<\/a> propose des guides d\u00e9taill\u00e9s, et des plateformes comme <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Udemy<\/a> offrent des cours complets sur le d\u00e9veloppement avec React. Vous pouvez \u00e9galement explorer des exemples pratiques sur des sites comme <a href=\"https:\/\/codepen.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">CodePen<\/a>. Pour plus d&rsquo;informations sur l&rsquo;importance de <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\">l&rsquo;utilisation des fonctions fl\u00e9ch\u00e9es avec React<\/a>, consultez cet article. Vous pourriez \u00e9galement trouver int\u00e9ressant de lire sur <a href=\"https:\/\/wikiform.fr\/codespace\/maitriser-objets-javascript-developper-react\">la ma\u00eetrise des objets en JavaScript pour le d\u00e9veloppement React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Ma\u00eetriser le <strong>state et les \u00e9v\u00e9nements en React<\/strong> est crucial pour le d\u00e9veloppement d&rsquo;applications web interactives et efficaces. En utilisant les \u00e9v\u00e9nements pour manipuler le state, vous pouvez cr\u00e9er des interfaces utilisateur dynamiques qui r\u00e9agissent aux interactions en temps r\u00e9el. Continuez \u00e0 explorer et \u00e0 pratiquer pour perfectionner vos comp\u00e9tences avec React. Pour plus de tutoriels sur React, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\">les fonctionnalit\u00e9s avanc\u00e9es de React et Redux<\/a>. Pour apprendre \u00e0 cr\u00e9er des composants interactifs en React, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/cr\u00e9er-un-composant-interactif-en-react\">tutoriel d\u00e9taill\u00e9<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-react\/145\" target=\"_blank\" rel=\"noopener\">\n  <img src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REACT-offre-50.gif\" alt=\"Learnify Formation React","protected":false},"excerpt":{"rendered":"<p>Changer le State avec les \u00c9v\u00e9nements en React est une comp\u00e9tence essentielle pour quiconque d\u00e9veloppe des applications dynamiques avec React. Ma\u00eetriser cette comp\u00e9tence permet de&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3174,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5930","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5930"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5930\/revisions"}],"predecessor-version":[{"id":5931,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5930\/revisions\/5931"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3174"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}