{"id":6188,"date":"2025-09-15T11:57:03","date_gmt":"2025-09-15T11:57:03","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/afficher-inputs-dynamiquement-react\/"},"modified":"2025-09-15T11:57:09","modified_gmt":"2025-09-15T11:57:09","slug":"afficher-inputs-dynamiquement-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/afficher-inputs-dynamiquement-react\/","title":{"rendered":"16.3 Afficher des Inputs Dynamiquement en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Inputs Dynamiques React<\/strong> est une comp\u00e9tence essentielle pour d\u00e9velopper des interfaces utilisateur r\u00e9actives. Apprenez comment cr\u00e9er et g\u00e9rer un formulaire flexible et dynamique qui s&rsquo;adapte \u00e0 l&rsquo;entr\u00e9e utilisateur en utilisant React, tout en assurant une exp\u00e9rience utilisateur fluide.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux Inputs Dynamiques 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\/706141607?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                    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();\n    }\n});\n<\/script>\n\n\n\n<p>G\u00e9rer des inputs de mani\u00e8re dynamique en React implique de manipuler l&rsquo;\u00e9tat des composants afin de refl\u00e9ter les changements dans l&rsquo;interface utilisateur. Cela permet de cr\u00e9er des formulaires flexibles capables de g\u00e9rer l&rsquo;ajout et la suppression de champs dynamiquement en r\u00e9ponse aux interactions des utilisateurs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Composants d&rsquo;Input Dynamiques<\/h3>\n\n\n\n<p>Pour commencer, nous allons cr\u00e9er un composant de base qui g\u00e8re une liste d&rsquo;inputs de mani\u00e8re dynamique. Cela vous permettra d&rsquo;ajouter ou de retirer des champs en fonction des besoins. Pour approfondir vos connaissances, vous pouvez lire cette introduction compl\u00e8te sur les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">avantages de React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction DynamicInputs() {\n  const [inputs, setInputs] = useState(['']);\n\n  const handleAddInput = () => {\n    setInputs([...inputs, '']);\n  };\n\n  const handleRemoveInput = (index) => {\n    const newInputs = inputs.slice();\n    newInputs.splice(index, 1);\n    setInputs(newInputs);\n  };\n\n  const handleChange = (e, index) => {\n    const newInputs = inputs.slice();\n    newInputs[index] = e.target.value;\n    setInputs(newInputs);\n  };\n\n  return (\n    <div>\n      {inputs.map((input, index) => (\n        <div key={index}>\n          <input\n            type=\"text\"\n            value={input}\n            onChange={(e) => handleChange(e, index)}\n          \/>\n          <button onClick={() => handleRemoveInput(index)}>Retirer<\/button>\n        <\/div>\n      ))}\n      <button onClick={handleAddInput}>Ajouter Input<\/button>\n    <\/div>\n  );\n}\n\nexport default DynamicInputs;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mettre \u00e0 Jour l&rsquo;Interface en Temps R\u00e9el<\/h3>\n\n\n\n<p>Lorsqu&rsquo;un utilisateur interagit avec les inputs, l&rsquo;interface est mise \u00e0 jour en temps r\u00e9el pour refl\u00e9ter ces interactions. Le tableau `inputs` maintient l&rsquo;\u00e9tat de tous les champs disponibles, et chaque mise \u00e0 jour entra\u00eene un nouveau rendu pour afficher les changements. Pour explorer plus en d\u00e9tail, reportez-vous \u00e0 notre article sur les <a href=\"https:\/\/wikiform.fr\/codespace\/differences-entre-props-et-state-react\" target=\"_blank\" rel=\"noopener\">diff\u00e9rences entre props et state en React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Validation Dynamique des Inputs<\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement valider les donn\u00e9es saisies en utilisant des fonctions de validation int\u00e9gr\u00e9es, et afficher des messages contextuels pour aider l&rsquo;utilisateur \u00e0 corriger ses entr\u00e9es. La validation est cruciale pour maintenir l&rsquo;int\u00e9grit\u00e9 des donn\u00e9es dans vos projets React, comme expliqu\u00e9 dans notre guide complet sur les <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-verifications-formulaire-react\" target=\"_blank\" rel=\"noopener\">v\u00e9rifications de formulaire en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function validateInput(value) {\n  return value.length > 0;\n}\n\nfunction DynamicValidatedInputs() {\n  const [inputs, setInputs] = useState(['']);\n  const [errors, setErrors] = useState([]);\n\n  const handleChange = (e, index) => {\n    const newInputs = inputs.slice();\n    newInputs[index] = e.target.value;\n    setInputs(newInputs);\n\n    const newErrors = errors.slice();\n    newErrors[index] = !validateInput(e.target.value);\n    setErrors(newErrors);\n  };\n\n  return (\n    <div>\n      {inputs.map((input, index) => (\n        <div key={index}>\n          <input\n            type=\"text\"\n            value={input}\n            onChange={(e) => handleChange(e, index)}\n            style={{ borderColor: errors[index] ? 'red' : 'black' }}\n          \/>\n          {errors[index] && <span style={{ color: 'red' }}>Input is invalid<\/span>}\n        <\/div>\n      ))}\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>Pour une pratique approfondie, essayez d&rsquo;int\u00e9grer ces techniques avec Redux, un outil puissant pour g\u00e9rer l&rsquo;\u00e9tat global de votre application. Consultez notre introduction sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-redux-pourquoi-utiliser\" target=\"_blank\" rel=\"noopener\">Redux et ses utilisations<\/a> pour avoir un aper\u00e7u de ses avantages.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REACT-offre-50.gif\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation React Offre 50%\" title=\"\"><\/a>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La dynamique des inputs en React permet de cr\u00e9er des formulaires flexibles et adaptables aux besoins des utilisateurs. Gr\u00e2ce \u00e0 l&rsquo;utilisation de l&rsquo;\u00e9tat et des \u00e9v\u00e9nements, vous pouvez g\u00e9rer efficacement les interactions utilisateur et les validations en temps r\u00e9el. Pour aller plus loin, explorez d&rsquo;autres techniques avanc\u00e9es de gestion d&rsquo;\u00e9tat avec des hooks comme <code>useReducer<\/code> et des biblioth\u00e8ques comme Redux. Pour plus d&rsquo;informations sur les fonctionnalit\u00e9s et les nouveaut\u00e9s de React, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/nouveautes-javascript-savoir-react\" target=\"_blank\" rel=\"noopener\">guide des nouveaut\u00e9s en JavaScript pour React<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" 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=\"Learnify Formation Redux et React Offre 50%\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Inputs Dynamiques React est une comp\u00e9tence essentielle pour d\u00e9velopper des interfaces utilisateur r\u00e9actives. Apprenez comment cr\u00e9er et g\u00e9rer un formulaire flexible et dynamique qui&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3153,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6188","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\/6188","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=6188"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6188\/revisions"}],"predecessor-version":[{"id":6189,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6188\/revisions\/6189"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3153"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}