{"id":6194,"date":"2025-10-06T11:55:36","date_gmt":"2025-10-06T11:55:36","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/changer-style-inputs-erreur-react\/"},"modified":"2026-11-02T10:17:06","modified_gmt":"2026-11-02T10:17:06","slug":"changer-style-inputs-erreur-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/changer-style-inputs-erreur-react\/","title":{"rendered":"16.6 Changer le Style des Inputs en Cas d&rsquo;Erreur React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Style Inputs Erreur React<\/strong> est une technique essentielle pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur et rendre vos applications web plus intuitives. Apprenons \u00e0 impl\u00e9menter cette fonctionnalit\u00e9 avec React, en utilisant des exemples pratiques pour configurer un retour visuel imm\u00e9diat sur les erreurs d&rsquo;entr\u00e9e utilisateur. Pour enrichir vos comp\u00e9tences sur l&rsquo;analyse de donn\u00e9es dans React, lisez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-fonctionnement-redux\" target=\"_blank\" rel=\"noopener\">le fonctionnement de Redux<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>Style Inputs Erreur React<\/strong> avec React<\/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\/706142289?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:\/\/learnifi.fr\/home\/course\/react-et-redux-cr%C3%A9er-des-sites-web-interactifs\/128\" 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:\/\/learnifi.fr\/home\/course\/react-et-redux-cr%C3%A9er-des-sites-web-interactifs\/128\" 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                    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:\/\/learnifi.fr\/home\/course\/python-devenir-d%C3%A9veloppeur-avec-les-bases-solides\/129')\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();\n    }\n});\n<\/script>\n\n\n<p>Dans le d\u00e9veloppement web, fournir un retour d&rsquo;erreur visuel clair lors de la saisie incorrecte est crucial pour l&rsquo;exp\u00e9rience utilisateur. Avec React, vous pouvez facilement g\u00e9rer les \u00e9tats d&rsquo;erreur et ajuster les styles des composants pour signaler un probl\u00e8me. Voici comment vous pouvez int\u00e9grer ces fonctionnalit\u00e9s dans votre application React. Si vous souhaitez en savoir plus sur la gestion du <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\" target=\"_blank\" rel=\"noopener\">state avec les hooks React<\/a>, parcourez cet article.<\/p>\n<!-- \/wp:post-content -->\n\n<!-- wp:heading {\"level\":3} -->\n<p class=\"wp-block-heading\">Cr\u00e9er un Composant Input avec Gestion d&rsquo;Erreur<\/p>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Pour commencer, nous allons construire un composant React simple qui affiche et g\u00e8re les erreurs de saisie utilisateur. Tout savoir sur les <a href=\"https:\/\/wikiform.fr\/codespace\/differences-entre-props-et-state-react\" target=\"_blank\" rel=\"noopener\">diff\u00e9rences entre props et state dans React<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code {\"className\":\"lang-jsx\"} -->\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useState } from 'react';\n\nfunction ValidatedInput() {\n  const [value, setValue] = useState('');\n  const [isError, setIsError] = useState(false);\n\n  const handleChange = (e) => {\n    const inputValue = e.target.value;\n    setValue(inputValue);\n    setIsError(inputValue.length < 3); \/\/ Simplicit\u00e9 : d\u00e9clencher une erreur si la valeur est inf\u00e9rieure \u00e0 3 caract\u00e8res\n  };\n\n  return (\n    <input\n      type=\"text\"\n      value={value}\n      onChange={handleChange}\n      style={{\n        border: isError ? '2px solid red' : '2px solid green',\n        padding: '10px',\n        marginBottom: '10px',\n      }}\n    \/>\n  );\n}\n\nexport default ValidatedInput;\n<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:heading {\"level\":3} -->\n<p class=\"wp-block-heading\">D\u00e9finir les Styles pour R\u00e9agir aux Erreurs<\/p>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>La section des styles conditionnels dans le code ci-dessus utilise la valeur de <code>isError<\/code> pour d\u00e9cider de la couleur de bordure de l&rsquo;input. Cela informe visuellement l&rsquo;utilisateur si l&rsquo;entr\u00e9e est valid\u00e9e ou non. Le style rouge indique une erreur, tandis que le vert indique une saisie correcte. Pour explorer les <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-dynamiquement-composants-react\" target=\"_blank\" rel=\"noopener\">mani\u00e8res de modifier dynamiquement des composants<\/a>, d\u00e9couvrez cet article.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<p class=\"wp-block-heading\">Ajouter un Message d&rsquo;Erreur pour Plus de Clart\u00e9<\/p>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Pour rendre l&rsquo;erreur encore plus apparente, vous pouvez ajouter un message d&rsquo;erreur sous l&rsquo;input qui s&rsquo;affichera uniquement lorsque l&rsquo;erreur est pr\u00e9sente :<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code {\"className\":\"lang-jsx\"} -->\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useState } from 'react';\n\nfunction ValidatedInputWithMessage() {\n  const [value, setValue] = useState('');\n  const [isError, setIsError] = useState(false);\n\n  const handleChange = (e) => {\n    const inputValue = e.target.value;\n    setValue(inputValue);\n    setIsError(inputValue.length < 3);\n  };\n\n  return (\n    <div>\n      <input\n        type=\"text\"\n        value={value}\n        onChange={handleChange}\n        style={{\n          border: isError ? '2px solid red' : '2px solid green',\n          padding: '10px',\n          marginBottom: '10px',\n        }}\n      \/>\n      {isError && <p style={{ color: 'red' }}>Le champ doit contenir au moins 3 caract\u00e8res.<\/p>}\n    <\/div>\n  );\n}\n\nexport default ValidatedInputWithMessage;\n<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:heading {\"level\":3} -->\n<p class=\"wp-block-heading\">\u00c9tendre les \u00c9l\u00e9ments de Validation<\/p>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Vous pouvez appliquer ce mod\u00e8le \u00e0 divers types d&rsquo;entr\u00e9es et ajouter plus de diversit\u00e9s de validations telles que la v\u00e9rification de courriels, de num\u00e9ros de t\u00e9l\u00e9phone ou d&rsquo;autres donn\u00e9es sp\u00e9cifiques. Toujours utiliser des valeurs de retour et des styles appropri\u00e9s pour signaler visuellement chaque type d&rsquo;erreur. L&rsquo;utilisation de <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\" target=\"_blank\" rel=\"noopener\">fonctions fl\u00e9ch\u00e9es dans JSX<\/a> peut simplifier votre syntaxe et rendre le code plus lisible.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Pour des validations plus complexes, envisagez d&rsquo;utiliser des biblioth\u00e8ques comme <code>formik<\/code> ou <code>react-hook-form<\/code> qui offrent des approches plus robustes et configurables pour g\u00e9rer les formulaires dans React. D\u00e9couvrez <a href=\"https:\/\/medium.com\/@formik\/why-you-should-use-formik-ab1180936a3e\" target=\"_blank\" rel=\"dofollow noopener\">pourquoi Formik est populaire<\/a> dans la gestion de formulaires.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Changer le style des inputs en cas d&rsquo;erreur dans React permet d&rsquo;am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur en fournissant des retours visuels et significatifs. Cela rend une application plus accessible et facile \u00e0 utiliser. En personnalisant le style et en ajoutant des messages d&rsquo;erreur, vous aidez efficacement les utilisateurs \u00e0 corriger leurs erreurs de saisie. Continuez \u00e0 explorer des solutions tierces pour mieux param\u00e9trer et g\u00e9rer les \u00e9tats de vos composants dans vos projets React. Pour aller plus loin, explorez l&rsquo;article sur <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-classes-javascript-react\" target=\"_blank\" rel=\"noopener\">l&rsquo;utilisation des classes en JavaScript pour React<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:html -->\n<div style=\"text-align: center;\">\n  <a href=\"https:\/\/learn-react.com\" target=\"_blank\" rel=\"noopener\">\n    <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/468x60?text=Cours+React+Gratuit\" loading=\"lazy\" alt=\"Apprenez React Gratuitement\" title=\"\">\n  <\/a>\n<\/div>\n<a href=\"https:\/\/learnifi.fr\/home\/course\/react-et-redux-cr%C3%A9er-des-sites-web-interactifs\/128\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Formation React et Redux\" title=\"\"><\/a>\n<!-- \/wp:html -->\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Style Inputs Erreur React est une technique essentielle pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur et rendre vos applications web plus intuitives. Apprenons \u00e0 impl\u00e9menter cette fonctionnalit\u00e9&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3175,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6194","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\/6194","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=6194"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6194\/revisions"}],"predecessor-version":[{"id":6338,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6194\/revisions\/6338"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3175"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}