{"id":5932,"date":"2024-09-14T09:24:37","date_gmt":"2024-09-14T09:24:37","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/evenements-disponibles-react-guide\/"},"modified":"2024-09-14T09:24:41","modified_gmt":"2024-09-14T09:24:41","slug":"evenements-disponibles-react-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/evenements-disponibles-react-guide\/","title":{"rendered":"3.11 Les \u00c9v\u00e9nements Disponibles en React : Guide"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Les \u00c9v\u00e9nements Disponibles en React<\/strong> sont un \u00e9l\u00e9ment essentiel pour rendre les applications web interactives et dynamiques. Ma\u00eetriser la gestion des <strong>\u00e9v\u00e9nements en React<\/strong> permet d&rsquo;am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur en lui offrant des interactions fluides et r\u00e9actives. Passons en revue les diff\u00e9rents types d&rsquo;\u00e9v\u00e9nements disponibles en React et d\u00e9couvrons comment les impl\u00e9menter au travers d&rsquo;exemples concrets de code. Pour en savoir plus sur les diff\u00e9rences de gestion des \u00e9v\u00e9nements dans les applications React, consultez notre article sur les <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\">diff\u00e9rences entre les single-page et multi-page applications en React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>\u00c9v\u00e9nements 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\/706057895?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\" 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, les \u00e9v\u00e9nements sont similaires aux \u00e9v\u00e9nements natifs du DOM, mais ils fonctionnent de mani\u00e8re l\u00e9g\u00e8rement diff\u00e9rente. React utilise son propre syst\u00e8me de gestion des \u00e9v\u00e9nements, appel\u00e9 Synthetic Events, qui normalise les \u00e9v\u00e9nements entre diff\u00e9rents navigateurs et assure une performance optimis\u00e9e. Explorons les bases de la gestion des \u00e9v\u00e9nements en React. Pour une introduction compl\u00e8te \u00e0 React, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\">qu&rsquo;est-ce que React : Introduction et Avantages<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React from 'react';\n\nclass App extends React.Component {\n  handleClick = () => {\n    alert('Button clicked!');\n  }\n\n  render() {\n    return (\n      <div>\n        <h1>Gestion des \u00c9v\u00e9nements en React<\/h1>\n        <button onClick={this.handleClick}>Cliquez-moi<\/button>\n      <\/div>\n    );\n  }\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Types d&rsquo;\u00c9v\u00e9nements en React<\/h3>\n\n\n\n<p>React propose une large gamme d&rsquo;\u00e9v\u00e9nements allant des \u00e9v\u00e9nements de souris et de clavier aux \u00e9v\u00e9nements de formulaire. D\u00e9couvrez \u00e9galement comment ajouter de nouveaux composants en React dans notre tutoriel <a href=\"https:\/\/wikiform.fr\/codespace\/comment-ajouter-nouveau-composant-react\">Comment ajouter un nouveau composant en React<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u00c9v\u00e9nements de Souris<\/h4>\n\n\n\n<p>Les \u00e9v\u00e9nements de souris incluent <code>onClick<\/code>, <code>onDoubleClick<\/code>, <code>onMouseEnter<\/code>, <code>onMouseLeave<\/code>, etc. Ils sont utilis\u00e9s pour d\u00e9tecter les interactions de l&rsquo;utilisateur avec la souris.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React from 'react';\n\nclass MouseEvents extends React.Component {\n  handleMouseEnter = () => {\n    console.log('Mouse entered the button area.');\n  }\n\n  handleMouseLeave = () => {\n    console.log('Mouse left the button area.');\n  }\n\n  render() {\n    return (\n      <button \n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        Survolez-moi !\n      <\/button>\n    );\n  }\n}\n\nexport default MouseEvents;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u00c9v\u00e9nements de Clavier<\/h4>\n\n\n\n<p>Les \u00e9v\u00e9nements clavier comme <code>onKeyDown<\/code>, <code>onKeyPress<\/code>, et <code>onKeyUp<\/code> permettent de r\u00e9agir aux touches press\u00e9es par l&rsquo;utilisateur. Ils sont particuli\u00e8rement utiles pour g\u00e9rer la saisie utilisateur dans les formulaires.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React from 'react';\n\nclass KeyboardEvents extends React.Component {\n  handleKeyDown = (event) => {\n    console.log(`Key pressed: ${event.key}`);\n  }\n\n  render() {\n    return (\n      <input type=\"text\" onKeyDown={this.handleKeyDown} placeholder=\"Tapez quelque chose...\" \/>\n    );\n  }\n}\n\nexport default KeyboardEvents;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u00c9v\u00e9nements de Formulaire<\/h4>\n\n\n\n<p>Les \u00e9v\u00e9nements de formulaire comme <code>onChange<\/code>, <code>onSubmit<\/code>, et <code>onFocus<\/code> sont utilis\u00e9s pour g\u00e9rer les interactions avec les \u00e9l\u00e9ments de formulaire tels que les entr\u00e9es, les s\u00e9lections, et les boutons de soumission. Pour d\u00e9couvrir plus de d\u00e9tails sur la gestion des formulaires en React, vous pouvez lire notre <a href=\"https:\/\/wikiform.fr\/codespace\/formulaires-react-guide-complet\">guide complet sur les formulaires en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React from 'react';\n\nclass FormEvents extends React.Component {\n  handleSubmit = (event) => {\n    event.preventDefault();\n    alert('Form submitted!');\n  }\n\n  handleChange = (event) => {\n    console.log(`New value: ${event.target.value}`);\n  }\n\n  render() {\n    return (\n      <form onSubmit={this.handleSubmit}>\n        <input type=\"text\" onChange={this.handleChange} placeholder=\"Entrez votre nom\" \/>\n        <button type=\"submit\">Soumettre<\/button>\n      <\/form>\n    );\n  }\n}\n\nexport default FormEvents;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u00c9v\u00e9nements de Fen\u00eatre<\/h4>\n\n\n\n<p>Les \u00e9v\u00e9nements de fen\u00eatre comme <code>onResize<\/code>, <code>onScroll<\/code>, ou <code>onLoad<\/code> permettent de r\u00e9agir aux actions de l&rsquo;utilisateur li\u00e9es \u00e0 la fen\u00eatre ou au document. Ils sont utiles pour des effets visuels ou des optimisations bas\u00e9es sur les dimensions actuelles de la fen\u00eatre. Pour une meilleure gestion des \u00e9tats dans vos composants React, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\">le cycle de vie d&rsquo;une application React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useEffect } from 'react';\n\nconst WindowEvents = () => {\n  useEffect(() => {\n    const handleResize = () => {\n      console.log(`Window resized to: ${window.innerWidth}x${window.innerHeight}`);\n    };\n\n    window.addEventListener('resize', handleResize);\n\n    \/\/ Clean up the event listener\n    return () => {\n      window.removeEventListener('resize', handleResize);\n    };\n  }, []);\n\n  return (\n    <div>\n      <h1>Redimensionnez la fen\u00eatre pour voir les changements.<\/h1>\n    <\/div>\n  );\n}\n\nexport default WindowEvents;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Synth\u00e8se des \u00c9v\u00e9nements en React<\/h3>\n\n\n\n<p>React regroupe les \u00e9v\u00e9nements au sein d&rsquo;un \u00e9v\u00e9nement synth\u00e9tique. Cela permet une gestion centralis\u00e9e et efficace des \u00e9v\u00e9nements \u00e0 travers diff\u00e9rents navigateurs. L&rsquo;objectif est de minimiser les diff\u00e9rences de comportement entre les navigateurs et d&rsquo;offrir une API unifi\u00e9e. Pour plus de d\u00e9tails sur ces concepts, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\">les React Hooks<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React from 'react';\n\nclass SyntheticEvents extends React.Component {\n  handleEvent = (event) => {\n    console.log(`Event type: ${event.type}`);\n    console.log(`Is a synthetic event: ${event.nativeEvent instanceof Event}`);\n  }\n\n  render() {\n    return (\n      <button onClick={this.handleEvent}>Testez l'\u00c9v\u00e9nement Synth\u00e9tique<\/button>\n    );\n  }\n}\n\nexport default SyntheticEvents;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion Avanc\u00e9e des \u00c9v\u00e9nements en React<\/h3>\n\n\n\n<p>Il est \u00e9galement possible d&rsquo;utiliser des techniques avanc\u00e9es pour la gestion des \u00e9v\u00e9nements en React. Cela inclut des strat\u00e9gies comme l&rsquo;optimisation des performances, la d\u00e9l\u00e9gation des \u00e9v\u00e9nements, ou l&rsquo;usage de biblioth\u00e8ques tierces pour enrichir les capacit\u00e9s d&rsquo;interaction.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Optimisation des Performances<\/h4>\n\n\n\n<p>Dans de grandes applications, la gestion incorrecte des \u00e9v\u00e9nements peut nuire aux performances. Il est important de minimiser le nombre de gestionnaires d&rsquo;\u00e9v\u00e9nements utilis\u00e9s et de profiter des techniques de d\u00e9l\u00e9gation d&rsquo;\u00e9v\u00e9nements. Pour enrichir vos connaissances sur ces aspects, lisez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/eviter-actualisation-inutile-composant-react\">comment \u00e9viter l&rsquo;actualisation inutile des composants en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React from 'react';\n\nclass OptimizedEvents extends React.Component {\n  handleParentClick = (event) => {\n    if (event.target.matches('button')) {\n      console.log('Button clicked:', event.target.textContent);\n    }\n  }\n\n  render() {\n    return (\n      <div onClick={this.handleParentClick}>\n        <button>Button 1<\/button>\n        <button>Button 2<\/button>\n        <button>Button 3<\/button>\n      <\/div>\n    );\n  }\n}\n\nexport default OptimizedEvents;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation de Biblioth\u00e8ques Tertiaires<\/h4>\n\n\n\n<p>Des biblioth\u00e8ques tierces comme <a href=\"https:\/\/www.react-spring.io\/\" target=\"_blank\" rel=\"noopener\">React Spring<\/a> pour les animations ou <a href=\"https:\/\/use-gesture.netlify.app\/\" target=\"_blank\" rel=\"noopener\">React Use Gesture<\/a> pour les interactions gestuelles peuvent enrichir l&rsquo;exp\u00e9rience utilisateur de vos applications React.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>\u00e9v\u00e9nements en React<\/strong> constituent une partie cruciale pour d\u00e9velopper des applications interactives et dynamiques. En ma\u00eetrisant leur utilisation, vous pouvez am\u00e9liorer consid\u00e9rablement l&rsquo;exp\u00e9rience utilisateur. Continuez \u00e0 explorer et pratiquer la gestion des \u00e9v\u00e9nements en React pour perfectionner vos comp\u00e9tences en d\u00e9veloppement d&rsquo;applications web. Pour d\u00e9couvrir comment <strong>cr\u00e9er vos propres applications interactives<\/strong> en utilisant React et Redux, veuillez consulter notre cours sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\">comment cr\u00e9er des sites interactifs avec React et Redux<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-frontend-avanc\u00e9-avec-react\/145\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/react-formation-PROMOTION.jpg\" loading=\"lazy\" alt=\"Learnify Formation React Promo\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Les \u00c9v\u00e9nements Disponibles en React sont un \u00e9l\u00e9ment essentiel pour rendre les applications web interactives et dynamiques. Ma\u00eetriser la gestion des \u00e9v\u00e9nements en React&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3206,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5932","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\/5932","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=5932"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5932\/revisions"}],"predecessor-version":[{"id":5933,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5932\/revisions\/5933"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3206"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}