Élément <textarea> non contrôlé dans React

Introduction

Dans ce laboratoire, nous allons apprendre à créer un élément <textarea> non contrôlé dans React. Le but de ce laboratoire est de montrer comment utiliser les propriétés defaultValue et onChange pour passer la valeur de la zone de texte à une fonction de rappel dans le composant parent. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la création de champs de saisie non contrôlés dans React.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react/FundamentalsGroup -.-> react/event_handling("Handling Events") subgraph Lab Skills react/event_handling -.-> lab-38365{{"Élément

non contrôlé"}}
  end</div></article></div></div><div class="pt-24 -mt-20 relative -z-10 anchor-item" id="%C3%A9l%C3%A9ment-%3Ctextarea%3E-non-contr%C3%B4l%C3%A9"></div><div id="md-position-1" class="md-editor md-editor-previewOnly" style="background-color:transparent;"><div id="md-position-1-preview-wrapper" class="md-editor-preview-wrapper"><article id="md-position-1-preview" class="md-editor-preview default-theme"><h2 data-line="0" id="Élément <textarea> non contrôlé">Élément <code><textarea></code> non contrôlé</h2>
<blockquote data-line="2">
<p><code>index.html</code> et <code>script.js</code> ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à <code>script.js</code> et <code>style.css</code>.</p>
</blockquote>
<p data-line="4">Cette fonction affiche un élément <code><textarea></code> qui n'est pas contrôlé par le composant parent. Elle utilise une fonction de rappel pour passer la valeur de l'entrée au composant parent.</p>
<p data-line="6">Pour utiliser cette fonction :</p>
<ul data-line="8">
<li>Passez la propriété <code>defaultValue</code> du composant parent comme valeur initiale du champ de saisie.</li>
<li>Utilisez l'événement <code>onChange</code> pour déclencher la fonction de rappel <code>onValueChange</code> et envoyer la nouvelle valeur au parent.</li>
</ul>
<pre data-line="11"><code class="language-jsx" language=jsx><span class="code-block">const TextArea = ({
  cols = 20,
  rows = 2,
  defaultValue,
  onValueChange,
  ...rest
}) => {
  return (
    <textarea
      cols={cols}
      rows={rows}
      defaultValue={defaultValue}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};</span></code></pre>
<p data-line="31">Utilisation de l'exemple :</p>
<pre data-line="33"><code class="language-jsx" language=jsx><span class="code-block">ReactDOM.createRoot(document.getElementById("root")).render(
  <TextArea
    placeholder="Insérez du texte ici..."
    onValueChange={(val) => console.log(val)}
  />
);</span></code></pre>
<p data-line="42">Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet <strong>Web 8080</strong> pour prévisualiser la page web.</p>
</article></div></div><div class="pt-24 -mt-20 relative -z-10 anchor-item" id="sommaire"></div><div id="md-position-2" class="md-editor md-editor-previewOnly" style="background-color:transparent;"><div id="md-position-2-preview-wrapper" class="md-editor-preview-wrapper"><article id="md-position-2-preview" class="md-editor-preview default-theme"><h2 data-line="0" id="Sommaire">Sommaire</h2>
<p data-line="2">Félicitations ! Vous avez terminé le laboratoire sur l'élément <code><textarea></code> non contrôlé. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.</p>
</article></div></div></div><span></span></div><div class="w-40 hidden lg:block shrink-0 pt-10 sticky top-24"><div id="tutorial-detail-sidebar"><p class="text-xs font-bold uppercase">sujets</p><div class="flex flex-wrap gap-1 mt-5"><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/linux">Linux</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/devops">DevOps</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/cybersecurity">Cybersecurity</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/python">Python</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/docker">Docker</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/kubernetes">Kubernetes</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/git">Git</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/shell">Shell</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/nmap">Nmap</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/wireshark">Wireshark</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/hydra">Hydra</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/java">Java</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/bigdata">Big Data</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/database">Database</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/postgresql">PostgreSQL</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/mysql">MySQL</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/mongodb">MongoDB</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/go">Golang</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/cpp">C++</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/c">C</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/ansible">Ansible</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/datascience">Data Science</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/ml">Machine Learning</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/pandas">Pandas</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/numpy">NumPy</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/sklearn">scikit-learn</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/matplotlib">Matplotlib</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/webdev">Web Development</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/alibaba">Alibaba Cloud</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/html">HTML</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/css">CSS</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/tutorials/category/javascript">JavaScript</a></div><div class="mt-10"><p class="text-xs font-bold uppercase mt-10">partager</p><div class="flex gap-2 mt-5"><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 shadow-sm dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300" href="https://twitter.com/intent/tweet?text=%C3%89l%C3%A9ment%20%3Ctextarea%3E%20non%20contr%C3%B4l%C3%A9%20dans%20React%20%7C%20LabEx&url=https://labex.io/tutorials/react-uncontrolled-textarea-element-38365" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DlZvw1nE.svg#twitter" fill="#333"></use></svg></a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 shadow-sm dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300" href="https://www.facebook.com/sharer.php?title=%C3%89l%C3%A9ment%20%3Ctextarea%3E%20non%20contr%C3%B4l%C3%A9%20dans%20React%20%7C%20LabEx&u=https://labex.io/tutorials/react-uncontrolled-textarea-element-38365" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DlZvw1nE.svg#facebook" fill="#333"></use></svg></a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 shadow-sm dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300" href="https://classroom.google.com/share?url=https://labex.io/tutorials/react-uncontrolled-textarea-element-38365" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DlZvw1nE.svg#google-classroom-black" fill="#333"></use></svg></a></div></div></div></div></div><div class="py-20"><div class="flex items-center align-center text-center w-full flex-row"><div class="flex border-gray-200 dark:border-gray-800 w-full border-t border-solid"></div><div class="font-medium text-gray-700 dark:text-gray-200 flex mx-3 whitespace-nowrap"><span class="text-2xl">Connexe <a href="/skilltrees/react" class="">React Cours</a></span></div><div class="flex border-gray-200 dark:border-gray-800 w-full border-t border-solid"></div></div><div class="grid grid-cols-12 gap-6 mt-10"><div class="col-span-12 sm:col-span-6 lg:col-span-4"><a href="/fr/courses/quick-start-with-react" class="course-card" data-v-eefdfaaf><div class="text-gray-800 bg-white overflow-hidden rounded-md shadow l-hover-shadow l-hover-translate-y" data-v-eefdfaaf><div class="relative l-bg-divider overflow-hidden course-image" data-v-eefdfaaf><div class="overflow-hidden cover course undefined" data-v-eefdfaaf data-v-a8c9b463><img src="https://cover-creator.labex.io/quick-start-with-react.png?lang=fr" onerror="this.setAttribute('data-error', 1)" width="525" height="270" alt="Commencer avec React" data-nuxt-img srcset="https://cover-creator.labex.io/quick-start-with-react.png?lang=fr 1x, https://cover-creator.labex.io/quick-start-with-react.png?lang=fr 2x" class="w-full h-auto" data-v-a8c9b463></div></div><div class="p-3" data-v-eefdfaaf><p class="h-14 text-xl font-semibold line-clamp-2 mb-4" data-v-eefdfaaf><span data-v-eefdfaaf>Commencer avec React</span></p><div class="flex items-center fs-0" data-v-eefdfaaf><div class="flex-auto truncate overflow-hidden" data-v-eefdfaaf><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-eefdfaaf>React</span></div><div class="shrink-0" data-v-eefdfaaf>Débutant</div></div></div></div></a></div><div class="col-span-12 sm:col-span-6 lg:col-span-4"><a href="/fr/courses/react-practice-labs" class="course-card" data-v-eefdfaaf><div class="text-gray-800 bg-white overflow-hidden rounded-md shadow l-hover-shadow l-hover-translate-y" data-v-eefdfaaf><div class="relative l-bg-divider overflow-hidden course-image" data-v-eefdfaaf><div class="overflow-hidden cover course undefined" data-v-eefdfaaf data-v-a8c9b463><img src="https://cover-creator.labex.io/react-practice-labs.png?lang=fr" onerror="this.setAttribute('data-error', 1)" width="525" height="270" alt="Laboratoires de pratique React" data-nuxt-img srcset="https://cover-creator.labex.io/react-practice-labs.png?lang=fr 1x, https://cover-creator.labex.io/react-practice-labs.png?lang=fr 2x" class="w-full h-auto" data-v-a8c9b463></div></div><div class="p-3" data-v-eefdfaaf><p class="h-14 text-xl font-semibold line-clamp-2 mb-4" data-v-eefdfaaf><span data-v-eefdfaaf>Laboratoires de pratique React</span></p><div class="flex items-center fs-0" data-v-eefdfaaf><div class="flex-auto truncate overflow-hidden" data-v-eefdfaaf><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-eefdfaaf>React</span></div><div class="shrink-0" data-v-eefdfaaf>Débutant</div></div></div></div></a></div><div class="col-span-12 sm:col-span-6 lg:col-span-4"><a href="/fr/courses/react-practice-challenges" class="course-card" data-v-eefdfaaf><div class="text-gray-800 bg-white overflow-hidden rounded-md shadow l-hover-shadow l-hover-translate-y" data-v-eefdfaaf><div class="relative l-bg-divider overflow-hidden course-image" data-v-eefdfaaf><div class="overflow-hidden cover course undefined" data-v-eefdfaaf data-v-a8c9b463><img src="https://cover-creator.labex.io/react-practice-challenges.png?lang=fr" onerror="this.setAttribute('data-error', 1)" width="525" height="270" alt="Défis pratiques React" data-nuxt-img srcset="https://cover-creator.labex.io/react-practice-challenges.png?lang=fr 1x, https://cover-creator.labex.io/react-practice-challenges.png?lang=fr 2x" class="w-full h-auto" data-v-a8c9b463></div></div><div class="p-3" data-v-eefdfaaf><p class="h-14 text-xl font-semibold line-clamp-2 mb-4" data-v-eefdfaaf><span data-v-eefdfaaf>Défis pratiques React</span></p><div class="flex items-center fs-0" data-v-eefdfaaf><div class="flex-auto truncate overflow-hidden" data-v-eefdfaaf><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-eefdfaaf>React</span></div><div class="shrink-0" data-v-eefdfaaf>Débutant</div></div></div></div></a></div></div></div></div></section></div><span></span><footer class="bg-slate-800"><div class="pt-10 pb-1"><div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl"><div class="flex flex-col"><div class="flex items-center justify-between w-full"><a href="#" aria-label="LabEx"><img src="/_ipx/s_196x60/labex-logo-light.svg" onerror="this.setAttribute('data-error', 1)" width="98" height="30" alt="LabEx" loading="lazy" data-nuxt-img sizes="(max-width: 991px) 78px, 98px" srcset="/_ipx/s_78x24/labex-logo-light.svg 78w, /_ipx/s_98x30/labex-logo-light.svg 98w, /_ipx/s_156x48/labex-logo-light.svg 156w, /_ipx/s_196x60/labex-logo-light.svg 196w"></a><div><div class="language-switch" data-v-a5d617b5><div data-headlessui-state class="relative inline-flex text-left rtl:text-right" data-v-a5d617b5><div id="headlessui-menu-button-qD2rrMp7bg:0" aria-haspopup="menu" aria-expanded="false" data-headlessui-state class="inline-flex w-full" role="button" data-n-ids="{"qD2rrMp7bg:0":"qD2rrMp7bg:0"}"><button type="button" class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm px-2.5 py-1.5 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 flex items-center gap-2 text-white hover:text-white hover:bg-slate-700" data-v-a5d617b5><span class="i-heroicons-globe-alt" data-v-a5d617b5></span><span data-v-a5d617b5>Changer de langue</span></button></div></div></div></div></div><p class="mt-4 mb-4 text-gray-400">Apprenez Linux, DevOps & Cybersécurité avec des Labs pratiques</p></div><div class="border-b border-gray-700 mb-8"></div><div class="grid gap-6 pb-10 lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-1"><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">LEARNING PATH</div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Linux</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/python" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Python</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/docker" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Docker</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/mysql" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn MySQL</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/java" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Java</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/jenkins" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Jenkins</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/ml" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Machine Learning</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/cybersecurity" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Cybersecurity Learning Path</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/devops" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">DevOps Learning Path</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/sklearn" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">scikit-learn Learning Path</a></div></div><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">PROJECTS & TUTORIALS</div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">All Interactive Tutorials</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/projects/category/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Linux Projects</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/projects/category/python" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Python Projects</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/projects/category/java" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Java Projects</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/projects/category/numpy" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Numpy Projects</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/category/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Linux Tutorial</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/category/docker" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Docker Tutorial</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/category/cybersecurity" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Cybersecurity tutorial</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/free-labs" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Free Labs</a></div><div class="flex flex-col gap-2"><a href="https://linux-commands.labex.io/" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Linux Commands Cheat Sheet</a></div></div><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">PLAYGROUNDS</div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/linux-online-linux-playground-372915" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Linux Terminal</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/docker-online-docker-playground-372912" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Docker Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/python-online-python-playground-372886" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Python Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/go-online-golang-playground-372913" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Golang Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/cpp-online-c-playground-372911" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online C++ Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/java-online-java-playground-372914" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Java Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/rust-online-rust-playground-372918" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Rust Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/mysql-online-mysql-playground-372916" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online MySQL Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/ansible-online-ansible-playground-415831" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Ansible Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/jenkins-online-jenkins-playground-415838" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Jenkins Playground</a></div></div><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">LATEST TUTORIALS</div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/python-how-to-use-itertools-combinations-in-python-398083" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Python Itertools Combinations</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/docker-how-to-use-docker-compose-with-host-network-configuration-394882" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Docker Compose with Host Network</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/linux-linux-systemctl-daemon-reload-390500" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Systemctl daemon-reload in Linux</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/shell-bash-regex-matching-391551" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Match Patterns with Bash Regex</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/free-labs/devops" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">DevOps Free Labs</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/python-key-of-max-value-13677" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Find Key with Max Value in Python Dictionary</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/free-labs/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Linux Free Labs</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/shell-bash-function-return-values-391153" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Bash Function Return Values</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/c-circle-area-and-circumference-in-c-123197" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Area and Circumference of a Circle in C</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/free-labs/cybersecurity" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Cybersecurity Free Labs</a></div></div></div><div class="flex flex-wrap justify-center items-center gap-2 text-sm text-gray-400"><a href="https://support.labex.io" target="_blank" class="hover:text-white">SUPPORT</a><span class="text-gray-600">|</span><a href="mailto:info@labex.io" class="hover:text-white">CONTACT US</a><span class="text-gray-600">|</span><a href="/fr/forum" class="hover:text-white">FORUM</a><span class="text-gray-600">|</span><a href="/fr/interview-questions" class="hover:text-white">INTERVIEW QUESTIONS</a><span class="text-gray-600">|</span><a href="/fr/teams" class="hover:text-white">LABEX TEAMS</a><span class="text-gray-600">|</span><a href="https://labex.io/fr/questions/labex-affiliate-program-a6jov663" rel="noopener noreferrer" class="hover:text-white">AFFILIATE </a><span class="text-gray-600">|</span><a href="https://sitemap.labex.io/" rel="noopener noreferrer" class="hover:text-white">SITEMAP</a><span class="text-gray-600">|</span><a href="/fr/privacy" class="hover:text-white">PRIVACY POLICY</a><span class="text-gray-600">|</span><a href="/fr/terms" class="hover:text-white">TERMS OF SERVICE</a></div><div class="sm:col-span-2 md:col-span-3 lg:col-span-4 text-gray-400 text-center"><div class="flex gap-2 mt-4 justify-center"><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Twitter" href="https://x.com/intent/follow?screen_name=wearelabex" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DlZvw1nE.svg#x-black" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Facebook" href="https://www.facebook.com/WeAreLabEx/" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DlZvw1nE.svg#facebook" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="LinkedIn" href="https://www.linkedin.com/company/wearelabex/mycompany/" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DlZvw1nE.svg#linkedin" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="TikTok" href="https://www.tiktok.com/@labexcoding" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DlZvw1nE.svg#tiktok" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="YouTube" href="https://www.youtube.com/@labexio" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DlZvw1nE.svg#youtube" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Discord" href="https://discord.gg/J6k3u69nU6" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DlZvw1nE.svg#discord" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Github" href="https://github.com/labex-labs" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DlZvw1nE.svg#github" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Dockerhub" href="https://hub.docker.com/u/labex" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DlZvw1nE.svg#docker-white" fill="#333"></use></svg></a></div></div></div></div><div class="py-3"><div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl"><p class="text-gray-400 font-medium text-center mb-0"> © 2017-2025 LabEx Technology Limited All Rights Reserved </p></div></div></footer><div class="alert-box" data-v-f8939478></div><div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true">[["Reactive",1],{"data":2,"state":300,"once":568,"_errors":569,"serverRendered":10,"path":570},{"tutorialDetail-react-uncontrolled-textarea-element-38365-fr":3,"skillTreeListData":58,"tutorialRecommendCourseListData":157,"skillTreeDetailData":180},{"tutorial":4,"steps":43,"skilltrees":56},{"id":5,"name":6,"fee_type":7,"type":7,"difficulty":8,"time":9,"from_community":10,"max_lab_num":11,"allow_to_start":12,"remain_num":7,"allow_to_view":12,"skills":13,"hidden":12,"path":26,"alias":27,"icon":28,"show_in_tutorial":10,"description":29,"default_console_type":30,"open_source_url":31,"meta_title":32,"meta_description":33,"meta_keywords":34,"skilltree_alias":19,"practice_url":21,"langs":35},38365,"Élément \u003Ctextarea> non contrôlé",0,"Beginner",10,true,-1,false,[14],{"key":15,"name":16,"desc":17,"project":18,"group":22},"react/event_handling","Handling Events","React allows you to handle user interactions and events, making the application interactive and responsive.",{"key":19,"name":20,"desc":21},"react","React","",{"key":23,"name":24,"desc":25},"react/FundamentalsGroup","Fundamentals","Fundamental concepts and building blocks of React, including JSX, components, props, state management, event handling, conditional rendering, lists, and keys.","react/30-seconds-of-react/lab-text-area","react-uncontrolled-textarea-element-38365","https://icons.labex.io/uncontrolled-textarea-element.png","Dans ce laboratoire, nous allons apprendre à créer un élément \u003Ctextarea> non contrôlé dans React. Le but de ce laboratoire est de montrer comment utiliser les propriétés defaultValue et onChange pour passer la valeur de la zone de texte à une fonction de rappel dans le composant parent. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la création de champs de saisie non contrôlés dans React.",4,"https://github.com/labex-labs/open-source-labs/tree/master/react/30-seconds-of-react/lab-text-area","Élément \u003Ctextarea> non contrôlé dans React","Apprenez à créer un élément textarea non contrôlé dans React, en utilisant les propriétés defaultValue et onChange pour passer la valeur à une fonction de rappel.","react, entrée non contrôlée, defaultValue, onChange, textarea",[36,37,38,39,40,41,42],"zh","es","fr","de","ja","ru","en",[44,48,52],{"position":7,"title":45,"layout":46,"text":47,"need_verify":12,"has_solution":12},"Introduction","doc-fullscreen","## Introduction\n\nDans ce laboratoire, nous allons apprendre à créer un élément `\u003Ctextarea>` non contrôlé dans React. Le but de ce laboratoire est de montrer comment utiliser les propriétés `defaultValue` et `onChange` pour passer la valeur de la zone de texte à une fonction de rappel dans le composant parent. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la création de champs de saisie non contrôlés dans React.\n\n\n---\n\n### Skills Graph\n\n```mermaid\n%%%%{init: {'theme':'neutral'}}%%%%\nflowchart RL\n  react((\"React\")) -.-> react/FundamentalsGroup([\"Fundamentals\"])\n  react/FundamentalsGroup -.-> react/event_handling(\"Handling Events\")\n  subgraph Lab Skills\n    react/event_handling -.-> lab-38365{{\"Élément \u003Ctextarea> non contrôlé\"}}\n  end\n```",{"position":49,"title":6,"layout":50,"text":51,"need_verify":10,"has_solution":12},1,"doc-workbench-split","## Élément `\u003Ctextarea>` non contrôlé\n\n> `index.html` et `script.js` ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à `script.js` et `style.css`.\n\nCette fonction affiche un élément `\u003Ctextarea>` qui n'est pas contrôlé par le composant parent. Elle utilise une fonction de rappel pour passer la valeur de l'entrée au composant parent.\n\nPour utiliser cette fonction :\n\n- Passez la propriété `defaultValue` du composant parent comme valeur initiale du champ de saisie.\n- Utilisez l'événement `onChange` pour déclencher la fonction de rappel `onValueChange` et envoyer la nouvelle valeur au parent.\n\n```jsx\nconst TextArea = ({\n  cols = 20,\n  rows = 2,\n  defaultValue,\n  onValueChange,\n  ...rest\n}) => {\n  return (\n    \u003Ctextarea\n      cols={cols}\n      rows={rows}\n      defaultValue={defaultValue}\n      onChange={({ target: { value } }) => onValueChange(value)}\n      {...rest}\n    />\n  );\n};\n```\n\nUtilisation de l'exemple :\n\n```jsx\nReactDOM.createRoot(document.getElementById(\"root\")).render(\n  \u003CTextArea\n    placeholder=\"Insérez du texte ici...\"\n    onValueChange={(val) => console.log(val)}\n  />\n);\n```\n\nVeuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet **Web 8080** pour prévisualiser la page web.\n",{"position":53,"title":54,"layout":46,"text":55,"need_verify":12,"has_solution":12},2,"Sommaire","## Sommaire\n\nFélicitations ! Vous avez terminé le laboratoire sur l'élément `\u003Ctextarea>` non contrôlé. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.\n",[57],{"name":20,"alias":19},{"paths":59},[60,63,66,69,72,75,78,81,84,87,90,93,96,99,102,105,108,111,114,117,120,123,126,129,132,135,138,141,144,147,150,153,156],{"alias":61,"name":62},"linux","Linux",{"alias":64,"name":65},"devops","DevOps",{"alias":67,"name":68},"cybersecurity","Cybersecurity",{"alias":70,"name":71},"python","Python",{"alias":73,"name":74},"docker","Docker",{"alias":76,"name":77},"kubernetes","Kubernetes",{"alias":79,"name":80},"git","Git",{"alias":82,"name":83},"shell","Shell",{"alias":85,"name":86},"nmap","Nmap",{"alias":88,"name":89},"wireshark","Wireshark",{"alias":91,"name":92},"hydra","Hydra",{"alias":94,"name":95},"java","Java",{"alias":97,"name":98},"bigdata","Big Data",{"alias":100,"name":101},"database","Database",{"alias":103,"name":104},"postgresql","PostgreSQL",{"alias":106,"name":107},"mysql","MySQL",{"alias":109,"name":110},"mongodb","MongoDB",{"alias":112,"name":113},"go","Golang",{"alias":115,"name":116},"cpp","C++",{"alias":118,"name":119},"c","C",{"alias":121,"name":122},"ansible","Ansible",{"alias":124,"name":125},"datascience","Data Science",{"alias":127,"name":128},"ml","Machine Learning",{"alias":130,"name":131},"pandas","Pandas",{"alias":133,"name":134},"numpy","NumPy",{"alias":136,"name":137},"sklearn","scikit-learn",{"alias":139,"name":140},"matplotlib","Matplotlib",{"alias":142,"name":143},"webdev","Web Development",{"alias":145,"name":146},"alibaba","Alibaba Cloud",{"alias":148,"name":149},"html","HTML",{"alias":151,"name":152},"css","CSS",{"alias":154,"name":155},"javascript","JavaScript",{"alias":19,"name":20},{"courses":158},[159,166,173],{"id":160,"alias":161,"name":162,"cover":163,"user_count":164,"level":49,"fee_type":7,"lab_coins":7,"tags":165,"type":7,"status":49,"has_cert":10,"hidden":12},1401,"quick-start-with-react","Commencer avec React","https://cover-creator.labex.io/quick-start-with-react.png?lang=fr",444,[20],{"id":167,"alias":168,"name":169,"cover":170,"user_count":171,"level":49,"fee_type":7,"lab_coins":7,"tags":172,"type":7,"status":49,"has_cert":12,"hidden":12},6336,"react-practice-labs","Laboratoires de pratique React","https://cover-creator.labex.io/react-practice-labs.png?lang=fr",61,[20],{"id":174,"alias":175,"name":176,"cover":177,"user_count":178,"level":49,"fee_type":7,"lab_coins":7,"tags":179,"type":7,"status":49,"has_cert":12,"hidden":12},6335,"react-practice-challenges","Défis pratiques React","https://cover-creator.labex.io/react-practice-challenges.png?lang=fr",23,[20],{"path":181,"team":299},{"id":182,"alias":19,"name":20,"img_url":183,"course_count":184,"hours":185,"enable_uid":12,"skills_count":186,"is_online":10,"is_followed":12,"has_cert":10,"cert_threshold":187,"skilltree":19,"project_count":188,"category":21,"followers_count":189,"tags":190,"url":21,"description":191,"icon":21,"authors":192,"levels":193,"learned_skills_count":7,"is_path_group":12,"groups":279,"meta_title":280,"meta_description":281,"meta_keywords":282,"parent_paths":283,"langs":297,"first_lab_alias":298,"first_course_alias":161},40,"https://file.labex.io/path/nUDMNpUKFvpT.png",3,30,13,9000,11,3051,[],"React is a well - known library for crafting user interfaces. This Skill Tree offers a systematic way to learn React. Tailored for web development novices, it provides a structured guide to grasp components, state management, and hooks. Hands - on, non - video courses and coding exercises in an interactive frontend playground help you develop practical skills in building modern, responsive web applications with React.",[],[194,209],{"level":49,"name":195,"courses":196},"courses",[197,201,205],{"id":160,"alias":161,"name":198,"cover":199,"user_count":164,"level":49,"fee_type":7,"lab_coins":7,"tags":200,"type":7,"status":49,"has_cert":10,"hidden":12},"Get Started with React","https://cover-creator.labex.io/quick-start-with-react.png",[20],{"id":167,"alias":168,"name":202,"cover":203,"user_count":171,"level":49,"fee_type":7,"lab_coins":7,"tags":204,"type":7,"status":49,"has_cert":12,"hidden":12},"React Practice Labs","https://cover-creator.labex.io/react-practice-labs.png",[20],{"id":174,"alias":175,"name":206,"cover":207,"user_count":178,"level":49,"fee_type":7,"lab_coins":7,"tags":208,"type":7,"status":49,"has_cert":12,"hidden":12},"React Practice Challenges","https://cover-creator.labex.io/react-practice-challenges.png",[20],{"level":53,"name":210,"courses":211},"projects",[212,219,225,231,237,243,249,255,261,267,273],{"id":213,"alias":214,"name":215,"cover":216,"user_count":217,"level":49,"fee_type":7,"lab_coins":7,"tags":218,"type":184,"status":49,"has_cert":10,"hidden":12},2117,"project-create-a-notes-app-using-react","Create a Notes App Using React","https://cover-creator.labex.io/project-create-a-notes-app-using-react.png",12,[20,152,155,149],{"id":220,"alias":221,"name":222,"cover":223,"user_count":53,"level":53,"fee_type":7,"lab_coins":7,"tags":224,"type":184,"status":49,"has_cert":10,"hidden":12},2826,"project-building-a-christmas-wish-list-builder-in-react","Building a Christmas Wish List Builder in React","https://cover-creator.labex.io/project-building-a-christmas-wish-list-builder-in-react.png",[149,20,152,155],{"id":226,"alias":227,"name":228,"cover":229,"user_count":184,"level":49,"fee_type":7,"lab_coins":7,"tags":230,"type":184,"status":49,"has_cert":10,"hidden":12},4070,"project-building-a-react-drag-and-drop-puzzle-game","Building a React Drag-and-Drop Puzzle Game","https://cover-creator.labex.io/project-building-a-react-drag-and-drop-puzzle-game.png",[152,155,20],{"id":232,"alias":233,"name":234,"cover":235,"user_count":7,"level":53,"fee_type":7,"lab_coins":7,"tags":236,"type":184,"status":49,"has_cert":10,"hidden":12},4071,"project-building-a-react-github-heatmap-contributions","Building a React GitHub Heatmap Contributions","https://cover-creator.labex.io/project-building-a-react-github-heatmap-contributions.png",[155,20,152],{"id":238,"alias":239,"name":240,"cover":241,"user_count":7,"level":53,"fee_type":7,"lab_coins":7,"tags":242,"type":184,"status":49,"has_cert":10,"hidden":12},5597,"project-browser-window-size","Responsive Navigation with Custom React Hook","https://cover-creator.labex.io/project-browser-window-size.png",[20,155],{"id":244,"alias":245,"name":246,"cover":247,"user_count":7,"level":53,"fee_type":7,"lab_coins":7,"tags":248,"type":184,"status":49,"has_cert":10,"hidden":12},5598,"project-change-page-theme","React Theme Switcher Application","https://cover-creator.labex.io/project-change-page-theme.png",[20,155],{"id":250,"alias":251,"name":252,"cover":253,"user_count":53,"level":53,"fee_type":7,"lab_coins":7,"tags":254,"type":184,"status":49,"has_cert":10,"hidden":12},5599,"project-colour-filter","React Colour Filter Application","https://cover-creator.labex.io/project-colour-filter.png",[20,155],{"id":256,"alias":257,"name":258,"cover":259,"user_count":53,"level":53,"fee_type":7,"lab_coins":7,"tags":260,"type":184,"status":49,"has_cert":10,"hidden":12},5600,"project-navigation-features","Implementing React Navigation Features","https://cover-creator.labex.io/project-navigation-features.png",[20,155],{"id":262,"alias":263,"name":264,"cover":265,"user_count":49,"level":53,"fee_type":7,"lab_coins":7,"tags":266,"type":184,"status":49,"has_cert":10,"hidden":12},5601,"project-personal-card-generator","Create Responsive Business Card with React","https://cover-creator.labex.io/project-personal-card-generator.png",[20,155],{"id":268,"alias":269,"name":270,"cover":271,"user_count":53,"level":49,"fee_type":7,"lab_coins":7,"tags":272,"type":184,"status":49,"has_cert":10,"hidden":12},5602,"project-show-and-hide","Build Interactive React Components","https://cover-creator.labex.io/project-show-and-hide.png",[20,155],{"id":274,"alias":275,"name":276,"cover":277,"user_count":53,"level":49,"fee_type":7,"lab_coins":7,"tags":278,"type":184,"status":49,"has_cert":10,"hidden":12},5603,"project-switch-between-light-and-dark","Switch Between Light and Dark","https://cover-creator.labex.io/project-switch-between-light-and-dark.png",[20],[],"React Skill Tree - Learning Path","Build modern web apps with React via practical courses, follow a guided roadmap, and experiment in an interactive frontend playground.","learn react online, react tutorials, react web development",[284],{"id":285,"alias":286,"name":143,"img_url":287,"course_count":288,"hours":289,"enable_uid":12,"skills_count":290,"is_online":10,"is_followed":12,"has_cert":12,"cert_threshold":291,"skilltree":286,"project_count":292,"category":21,"followers_count":293,"tags":294,"url":21,"description":295,"icon":21,"authors":296},71,"web-development","https://file.labex.io/path/NHa0nG5axMBE.png",6,300,105,8000,254,2441,[],"Web development is a dynamic and crucial field in the digital era. This skill tree offers a systematic way to learn front - end and back - end technologies. Tailored for beginners, it provides a clear roadmap to master HTML, CSS, JavaScript, and popular frameworks. Through hands - on, non - video courses and practical coding exercises, you'll build real websites and web applications in an interactive environment.",[],[36,40,37,38,39,41,42],"react-your-first-react-lab-92968",[],{"$snuxt-i18n-meta":301,"$scolor-mode":302,"$suser":-1,"$scopywriting":304,"$sjoined_teams":554,"$sowned_teams":555,"$sjoined_skill_strees":556,"$sget_joined_skill_strees_pending":10,"$suser_streaks":557,"$stoday_get_streak":12,"$snext_skill_badge":557,"$snext_streak_badge":557,"$slabby_settings":558,"$schat_list":560,"$schat_pending":10,"$schat_branch":12,"$schat_error_msg":21,"$schat_background":557,"$sstep_questins":561,"$sshow_panel":12,"$sshow_transition":10,"$stransition_height":7,"$spanel_width":7,"$sacquired_badges":562,"$sstop_generating":12,"$scan_stop_generating":12,"$sshow_driver":12,"$scurrent_lab_steps":563,"$scurrent_step_index":7,"$ssite-config":564},{},{"preference":303,"value":303,"unknown":10,"forced":12},"light",[305,318,395,536,546],{"key":306,"text":307,"tags":308,"data":310},"modal","🚀 Since 2017, Trusted by 300k Learners, Alibaba Cloud Training Partner",[309],"free_user",{"close":311,"confirm_button":313,"title":317},{"hours":312},24,{"label":314,"type":315,"url":316},"Level Up With LabEx Pro","link","/pricing","Free Plan Limited to 3 VM Launches Per Day",{"key":319,"text":21,"tags":320,"data":321},"country_codes",[309],{"codes":322},[323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392],{"code":324,"emoji":325},"IN","🇮🇳",{"code":327,"emoji":328},"ID","🇮🇩",{"code":330,"emoji":331},"EG","🇪🇬",{"code":333,"emoji":334},"PK","🇵🇰",{"code":336,"emoji":337},"MY","🇲🇾",{"code":339,"emoji":340},"VN","🇻🇳",{"code":342,"emoji":343},"UG","🇺🇬",{"code":345,"emoji":346},"PH","🇵🇭",{"code":348,"emoji":349},"BR","🇧🇷",{"code":351,"emoji":352},"ET","🇪🇹",{"code":354,"emoji":355},"BD","🇧🇩",{"code":357,"emoji":358},"NG","🇳🇬",{"code":360,"emoji":361},"KE","🇰🇪",{"code":363,"emoji":364},"IR","🇮🇷",{"code":366,"emoji":367},"MX","🇲🇽",{"code":369,"emoji":370},"TR","🇹🇷",{"code":372,"emoji":373},"DZ","🇩🇿",{"code":375,"emoji":376},"SD","🇸🇩",{"code":378,"emoji":379},"AO","🇦🇴",{"code":381,"emoji":382},"PE","🇵🇪",{"code":384,"emoji":385},"GH","🇬🇭",{"code":387,"emoji":388},"MZ","🇲🇿",{"code":390,"emoji":391},"IQ","🇮🇶",{"code":393,"emoji":394},"UZ","🇺🇿",{"key":396,"text":397,"tags":398,"data":402},"footer","footer 配置，缓存 1 分钟，修改后 1 分钟生效\t\n",[309,399,400,401],"not_logged_in","pro_user","trial_user",{"footer":403},[404,437,470,503],{"items":405,"name":436},[406,409,412,415,418,421,424,427,430,433],{"name":407,"url":408},"Learn Linux","https://labex.io/skilltrees/linux",{"name":410,"url":411},"Learn Python","https://labex.io/skilltrees/python",{"name":413,"url":414},"Learn Docker","https://labex.io/skilltrees/docker",{"name":416,"url":417},"Learn MySQL","https://labex.io/skilltrees/mysql",{"name":419,"url":420},"Learn Java","https://labex.io/skilltrees/java",{"name":422,"url":423},"Learn Jenkins","https://labex.io/skilltrees/jenkins",{"name":425,"url":426},"Learn Machine Learning","https://labex.io/skilltrees/ml",{"name":428,"url":429},"Cybersecurity Learning Path","https://labex.io/skilltrees/cybersecurity",{"name":431,"url":432},"DevOps Learning Path","https://labex.io/skilltrees/devops",{"name":434,"url":435},"scikit-learn Learning Path","https://labex.io/skilltrees/sklearn","LEARNING PATH",{"items":438,"name":469},[439,442,445,448,451,454,457,460,463,466],{"name":440,"url":441},"All Interactive Tutorials","https://labex.io/tutorials",{"name":443,"url":444},"Linux Projects","https://labex.io/projects/category/linux",{"name":446,"url":447},"Python Projects","https://labex.io/projects/category/python",{"name":449,"url":450},"Java Projects","https://labex.io/projects/category/java",{"name":452,"url":453},"Numpy Projects","https://labex.io/projects/category/numpy",{"name":455,"url":456},"Linux Tutorial","https://labex.io/tutorials/category/linux",{"name":458,"url":459},"Docker Tutorial","https://labex.io/tutorials/category/docker",{"name":461,"url":462},"Cybersecurity tutorial","https://labex.io/tutorials/category/cybersecurity",{"name":464,"url":465},"Free Labs","https://labex.io/free-labs",{"name":467,"url":468},"Linux Commands Cheat Sheet","https://linux-commands.labex.io/","PROJECTS & TUTORIALS",{"items":471,"name":502},[472,475,478,481,484,487,490,493,496,499],{"name":473,"url":474},"Online Linux Terminal","https://labex.io/tutorials/linux-online-linux-playground-372915",{"name":476,"url":477},"Online Docker Playground","https://labex.io/tutorials/docker-online-docker-playground-372912",{"name":479,"url":480},"Online Python Playground","https://labex.io/tutorials/python-online-python-playground-372886",{"name":482,"url":483},"Online Golang Playground","https://labex.io/tutorials/go-online-golang-playground-372913",{"name":485,"url":486},"Online C++ Playground","https://labex.io/tutorials/cpp-online-c-playground-372911",{"name":488,"url":489},"Online Java Playground","https://labex.io/tutorials/java-online-java-playground-372914",{"name":491,"url":492},"Online Rust Playground","https://labex.io/tutorials/rust-online-rust-playground-372918",{"name":494,"url":495},"Online MySQL Playground","https://labex.io/tutorials/mysql-online-mysql-playground-372916",{"name":497,"url":498},"Online Ansible Playground","https://labex.io/tutorials/ansible-online-ansible-playground-415831",{"name":500,"url":501},"Online Jenkins Playground","https://labex.io/tutorials/jenkins-online-jenkins-playground-415838","PLAYGROUNDS",{"items":504,"name":535},[505,508,511,514,517,520,523,526,529,532],{"name":506,"url":507},"Python Itertools Combinations","https://labex.io/tutorials/python-how-to-use-itertools-combinations-in-python-398083",{"name":509,"url":510},"Docker Compose with Host Network","https://labex.io/tutorials/docker-how-to-use-docker-compose-with-host-network-configuration-394882",{"name":512,"url":513},"Systemctl daemon-reload in Linux","https://labex.io/tutorials/linux-linux-systemctl-daemon-reload-390500",{"name":515,"url":516},"Match Patterns with Bash Regex","https://labex.io/tutorials/shell-bash-regex-matching-391551",{"name":518,"url":519},"DevOps Free Labs","https://labex.io/free-labs/devops",{"name":521,"url":522},"Find Key with Max Value in Python Dictionary","https://labex.io/tutorials/python-key-of-max-value-13677",{"name":524,"url":525},"Linux Free Labs","https://labex.io/free-labs/linux",{"name":527,"url":528},"Bash Function Return Values","https://labex.io/tutorials/shell-bash-function-return-values-391153",{"name":530,"url":531},"Area and Circumference of a Circle in C","https://labex.io/tutorials/c-circle-area-and-circumference-in-c-123197",{"name":533,"url":534},"Cybersecurity Free Labs","https://labex.io/free-labs/cybersecurity","LATEST TUTORIALS",{"key":537,"text":538,"tags":539,"data":540},"free_labs_page","free labs 页面 TDK",[309,401,400,399],{"free_labs_page":541},{"description":542,"meta_description":543,"meta_keywords":544,"meta_title":545,"title":464},"1000+ Free Interactive Labs in 30+ Tech Fields for Developers and\n Students. Practice and enhance your skills with free hands-on exercises and\n real-world scenarios.","Discover LabEx's 1000+ free interactive labs across Linux, DevOps, Cybersecurity, Data Science, Web Development, Machine Learning, and more. Gain free access to expert-led training and hands-on practice in a dynamic environment.","Free Labs, LabEx, Interactive Labs, Free Tech Skills, Free Hands-On Practice, Online Learning","Free Labs | Interactive Practice in 30+ Tech Fields",{"key":547,"text":21,"tags":548,"data":549},"interview_questions_page",[401,309,400,399],{"interview_questions_page":550},{"description":551,"meta_description":543,"meta_keywords":544,"meta_title":552,"title":553},"Practice real-world interview challenges with hands-on labs and AI  guidance","Technical Interview Questions | Interactive Practice in 30+ Tech Fields","Technical  Interview Questions",[],[],[],null,{"fontSize":559,"darkTheme":12,"monitoring":12},"md",[],[],[],[],{"currentLocale":38,"defaultLocale":42,"env":565,"name":566,"url":567},"production","LabEx","https://labex.io",["Set"],{"tutorialDetail-react-uncontrolled-textarea-element-38365-fr":557,"skillTreeDetailData":557,"skillTreeListData":557,"tutorialRecommendCourseListData":557},"/fr/tutorials/react-uncontrolled-textarea-element-38365"]</script>
<script>window.__NUXT__={};window.__NUXT__.config={public:{turnstile:{siteKey:"0x4AAAAAAAKM2eNgDcxF-9yH"},env:"production",appVersion:"fead0e0",cookie:{domain:""},gtag:{id:"G-ZFCX52ZJTZ"},ads:{id:"AW-882002536",registerConversionTag:"MBFrCIGFxNQYEOiUyaQD",subscriptionConversionTag:"crfuCO_z2tQYEOiUyaQD",purchaseConversionTag:"53Q2COvEvO0YEOiUyaQD"},gtm:{id:"GTM-TN7PC69C"},apiBaseUrl:"https://labex.io/api/v2",ossBaseUrl:"https://file.labex.io",paypalClientId:"AZZ0ZORi-uwIWCMBvvWS8pN7yKq3dEmOuztg95XoqmPv0WihfrIU3XYEByj3y1sZcB6g2CW5tjcQOlHX",googleClientId:"359324822670-0i8infpcje3uh1ttca1d6stgdmdmhk1a.apps.googleusercontent.com",sentry:{dsn:"https://a548fec1e2e7dd372776fed0b8684413@o4505046079111168.ingest.sentry.io/4506585020956672"},webPushServerKey:"BHIC0R48BSznqt8oCmKfQJkty77I0SV-EWdNqJ-3EPJ-HUBqnXKlrw_6cowDynxkVdNA26Y1q6s-VTaUdBYYICU",xAuth:"",stripeKey:"pk_live_51NnFfaISCR4x8ogMvIwl9UJQpDybg8tc41t8igKNOtejuDkPiQBvjShWmA94hm6Ii7hBpCxyiJ5CceACBNvIJWFj00KyBHumTT",i18n:{baseUrl:"",defaultLocale:"en",defaultDirection:"ltr",strategy:"prefix_except_default",lazy:false,rootRedirect:"",routesNameSeparator:"___",defaultLocaleRouteNameSuffix:"default",skipSettingLocaleOnNavigate:false,differentDomains:false,trailingSlash:false,locales:[{code:"en",iso:"en-US",dir:"ltr",name:"English",files:["/app/i18n/locales/en.json"]},{code:"zh",iso:"zh-CN",dir:"ltr",name:"简体中文",files:["/app/i18n/locales/zh.json"]},{code:"es",iso:"es-ES",dir:"ltr",name:"Español",files:["/app/i18n/locales/es.json"]},{code:"ja",iso:"ja-JP",dir:"ltr",name:"日本語",files:["/app/i18n/locales/jp.json"]},{code:"fr",iso:"fr-FR",dir:"ltr",name:"Français",files:["/app/i18n/locales/fr.json"]},{code:"de",iso:"de-DE",dir:"ltr",name:"Deutsch",files:["/app/i18n/locales/de.json"]},{code:"ru",iso:"ru-RU",dir:"ltr",name:"Русский",files:["/app/i18n/locales/ru.json"]}],detectBrowserLanguage:false,experimental:{localeDetector:"",switchLocalePathLinkSSR:false,autoImportTranslationFunctions:false,typedPages:true,typedOptionsAndMessages:false},multiDomainLocales:false}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
<script type="application/ld+json" id="schema-org-graph" data-hid="3437552">{"@context":"https://schema.org","@graph":[{"@id":"https://labex.io#website","@type":"WebSite","inLanguage":"fr","name":"LabEx","url":"https://labex.io"},{"@id":"https://labex.io/fr/tutorials/react-uncontrolled-textarea-element-38365#webpage","@type":"WebPage","description":"Apprenez à créer un élément textarea non contrôlé dans React, en utilisant les propriétés defaultValue et onChange pour passer la valeur à une fonction de rappel.","name":"Élément \u003Ctextarea> non contrôlé dans React | LabEx","url":"https://labex.io/fr/tutorials/react-uncontrolled-textarea-element-38365","isPartOf":{"@id":"https://labex.io#website"},"potentialAction":[{"@type":"ReadAction","target":["https://labex.io/fr/tutorials/react-uncontrolled-textarea-element-38365"]}]}]}</script></body></html><script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"rayId":"92d13ea0c826f5fb","version":"2025.3.0","serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"token":"c26e5c2e7aa04b40b4143b15a6e3e798","b":1}' crossorigin="anonymous"></script>