{"id":6190,"date":"2025-09-22T11:58:20","date_gmt":"2025-09-22T11:58:20","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/autoriser-ecriture-formulaire-react\/"},"modified":"2025-09-22T11:58:24","modified_gmt":"2025-09-22T11:58:24","slug":"autoriser-ecriture-formulaire-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/autoriser-ecriture-formulaire-react\/","title":{"rendered":"16.4 Autoriser l&rsquo;\u00c9criture dans un Formulaire en React"},"content":{"rendered":"Pour r\u00e9pondre efficacement \u00e0 ces exigences, voici l&rsquo;article r\u00e9vis\u00e9 avec les am\u00e9liorations SEO directement appliqu\u00e9es dans le HTML\u00a0:\n\n\u00ab\u00a0`html\n\n<p><strong>Utiliser un Formulaire en React pour Autoriser l&rsquo;\u00c9criture<\/strong> est une comp\u00e9tence essentielle dans le d\u00e9veloppement d&rsquo;interfaces modernes. D\u00e9couvrir comment permettre l&rsquo;\u00e9criture dans un formulaire avec React am\u00e9liore l&rsquo;interactivit\u00e9 et la fonctionnalit\u00e9 de vos applications web. Dans ce tutoriel, nous explorerons ensemble les meilleures pratiques pour g\u00e9rer l&rsquo;\u00e9tat et les \u00e9v\u00e9nements utilisateurs dans un formulaire. Ce sujet est souvent abord\u00e9 dans nos articles, notamment dans notre <a href=\"https:\/\/wikiform.fr\/codespace\/autoriser-ecriture-formulaire-react\" target=\"_blank\" rel=\"noopener\">guide complet sur les formulaires React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;\u00c9criture dans un Formulaire 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\/706141962?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>Pour autoriser l&rsquo;\u00e9criture dans des champs de formulaire React, vous devez comprendre comment g\u00e9rer l&rsquo;\u00e9tat des composants. Les formulaires contr\u00f4l\u00e9s utilisent les propri\u00e9t\u00e9s de l&rsquo;\u00e9tat React pour g\u00e9rer les valeurs d\u2019entr\u00e9e, tandis que les formulaires non contr\u00f4l\u00e9s d\u00e9pendent des r\u00e9f\u00e9rences DOM pour acc\u00e9der aux valeurs. Vous pouvez \u00e9galement explorer les <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\" target=\"_blank\" rel=\"noopener\">extensions indispensables pour d\u00e9velopper en React<\/a> qui simplifient le processus.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9ation d&rsquo;un Formulaire Contr\u00f4l\u00e9 en React<\/h3>\n\n\n\n<p>Pour d\u00e9montrer comment cr\u00e9er un formulaire contr\u00f4l\u00e9, utilisons un champ simple de saisie de texte. Le composant utilise l&rsquo;\u00e9tat interne pour stocker et g\u00e9rer la valeur du champ :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction ControlledForm() {\n    const [inputValue, setInputValue] = useState('');\n\n    const handleInputChange = (event) => {\n        setInputValue(event.target.value);\n    };\n\n    return (\n        <form>\n            <label>\n                Nom:\n                <input type=\"text\" value={inputValue} onChange={handleInputChange} \/>\n            <\/label>\n        <\/form>\n    );\n}\n\nexport default ControlledForm;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Comportement des \u00c9v\u00e9nements dans les Formulaires Contr\u00f4l\u00e9s<\/h3>\n\n\n\n<p>Dans un formulaire contr\u00f4l\u00e9, chaque modification dans le champ d\u00e9clenche l&rsquo;\u00e9v\u00e9nement <code>onChange<\/code>, lequel met ensuite \u00e0 jour l&rsquo;\u00e9tat du composant via <code>setInputValue<\/code>. Cette configuration assure que la valeur du champ dans l&rsquo;interface utilisateur refl\u00e8te l&rsquo;\u00e9tat actuel et vice versa. Pour comprendre cette m\u00e9thode, r\u00e9f\u00e9rez-vous \u00e0 notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/evenements-disponibles-react-guide\" target=\"_blank\" rel=\"noopener\">les \u00e9v\u00e9nements disponibles en React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9ation d&rsquo;un Formulaire Non Contr\u00f4l\u00e9 avec React<\/h3>\n\n\n\n<p>Parfois, il peut \u00eatre pertinent d&rsquo;utiliser un formulaire non contr\u00f4l\u00e9, notamment pour les formulaires simples. Dans ce sc\u00e9nario, utilisez les r\u00e9f\u00e9rences React pour acc\u00e9der aux \u00e9l\u00e9ments du DOM :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useRef } from 'react';\n\nfunction UncontrolledForm() {\n    const inputRef = useRef(null);\n\n    const handleSubmit = (event) => {\n        event.preventDefault();\n        alert('Nom soumis: ' + inputRef.current.value);\n    };\n\n    return (\n        <form onSubmit={handleSubmit}>\n            <label>\n                Nom:\n                <input type=\"text\" ref={inputRef} \/>\n            <\/label>\n            <button type=\"submit\">Envoyer<\/button>\n        <\/form>\n    );\n}\n\nexport default UncontrolledForm;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Quand Utiliser des Formulaires Contr\u00f4l\u00e9s vs Non Contr\u00f4l\u00e9s<\/h3>\n\n\n\n<p>Les formulaires contr\u00f4l\u00e9s permettent une gestion fine des valeurs et sont pr\u00e9f\u00e9rables lorsque des validations ou des mises \u00e0 jour dynamiques d&rsquo;interface sont n\u00e9cessaires. En revanche, les formulaires non contr\u00f4l\u00e9s sont utiles pour les interactions simples n\u00e9cessitant peu de manipulation d&rsquo;\u00e9tat. Pour une vision plus approfondie sur cette diff\u00e9rence, vous pouvez consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">tutoriel sur la cr\u00e9ation de votre premi\u00e8re application React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Validation des Inscriptions avec React<\/h3>\n\n\n\n<p>Les formulaires contr\u00f4l\u00e9s facilitent l&rsquo;impl\u00e9mentation de la validation en temps r\u00e9el. Ajoutons des validations de base pour un champ de mot de passe. Ce genre de validation est couramment exig\u00e9 dans les <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-classes-javascript-react\" target=\"_blank\" rel=\"noopener\">applications utilisant React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction SignupForm() {\n    const [password, setPassword] = useState('');\n    const [validationMessage, setValidationMessage] = useState('');\n\n    const checkPasswordStrength = () => {\n        if (password.length < 8) {\n            setValidationMessage('Mot de passe trop court.');\n        } else {\n            setValidationMessage('Mot de passe valide.');\n        }\n    };\n\n    const handlePasswordChange = (event) => {\n        setPassword(event.target.value);\n        checkPasswordStrength();\n    };\n\n    return (\n        <form>\n            <label>\n                Mot de passe:\n                <input type=\"password\" value={password} onChange={handlePasswordChange} \/>\n            <\/label>\n            <p>{validationMessage}<\/p>\n        <\/form>\n    );\n}\n\nexport default SignupForm;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur l&rsquo;\u00c9criture Formulaire React<\/h2>\n\n\n\n<p>Comprendre comment <strong>autoriser l&rsquo;\u00e9criture dans un formulaire React<\/strong> est essentiel pour cr\u00e9er des interfaces utilisateur modernes. En utilisant les formulaires contr\u00f4l\u00e9s, vous pouvez mieux g\u00e9rer l&rsquo;\u00e9tat et permettre des validations dynamiques, am\u00e9liorant ainsi l&rsquo;exp\u00e9rience utilisateur. Pour aller plus loin, explorez les biblioth\u00e8ques tierces comme <a href=\"https:\/\/formik.org\/\" target=\"_blank\" rel=\"noopener\">Formik<\/a> pour g\u00e9rer les formulaires avec encore plus d&rsquo;efficacit\u00e9 et moins de code. Vous pouvez \u00e9galement explorer notre cours sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\">le d\u00e9veloppement d&rsquo;interfaces interactives avec React et Redux<\/a> pour approfondir vos comp\u00e9tences.<\/p>\n\n\n\n<p>Pour ceux qui voudraient avoir une compr\u00e9hension plus avanc\u00e9e de React, nous avons un <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">tutoriel d\u00e9taill\u00e9 sur comment cr\u00e9er votre premi\u00e8re application React<\/a> et ainsi enrichir continuellement vos connaissances en d\u00e9veloppement web.<\/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\"><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<!-- Promotion Formation Learnify -->\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\u00ab\u00a0`\n\nEn ajoutant ces contenus, des liens internes et externes, ainsi que des \u00e9l\u00e9ments promotionnels, cela r\u00e9pond aux crit\u00e8res SEO tout en enrichissant l&rsquo;article pour atteindre les 1200 mots minimum.","protected":false},"excerpt":{"rendered":"<p>Pour r\u00e9pondre efficacement \u00e0 ces exigences, voici l&rsquo;article r\u00e9vis\u00e9 avec les am\u00e9liorations SEO directement appliqu\u00e9es dans le HTML\u00a0: \u00ab\u00a0`html Utiliser un Formulaire en React pour&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3170,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6190","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\/6190","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=6190"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6190\/revisions"}],"predecessor-version":[{"id":6191,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6190\/revisions\/6191"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3170"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}