Elemento <textarea> no controlado en React

Introducción

En este laboratorio, aprenderemos cómo crear un elemento <textarea> no controlado en React. El objetivo de este laboratorio es mostrar cómo usar las propiedades defaultValue y onChange para pasar el valor del área de texto a una función de devolución de llamada en el componente padre. Al final de este laboratorio, tendrás una mejor comprensión de cómo crear campos de entrada no controlados en 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{{"Elemento

no controlado"}}
  end</div></article></div></div><div class="pt-24 -mt-20 relative -z-10 anchor-item" id="elemento-%3Ctextarea%3E-no-controlado"></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="Elemento <textarea> no controlado">Elemento <code><textarea></code> no controlado</h2>
<blockquote data-line="2">
<p><code>index.html</code> y <code>script.js</code> ya se han proporcionado en la máquina virtual. En general, solo es necesario agregar código a <code>script.js</code> y <code>style.css</code>.</p>
</blockquote>
<p data-line="4">Esta función renderiza un elemento <code><textarea></code> que no está controlado por el componente padre. Utiliza una función de devolución de llamada para pasar el valor de la entrada al componente padre.</p>
<p data-line="6">Para usar esta función:</p>
<ul data-line="8">
<li>Pase la propiedad <code>defaultValue</code> desde el componente padre como el valor inicial del campo de entrada.</li>
<li>Utilice el evento <code>onChange</code> para desencadenar la devolución de llamada <code>onValueChange</code> y enviar el nuevo valor al padre.</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">Uso de ejemplo:</p>
<pre data-line="33"><code class="language-jsx" language=jsx><span class="code-block">ReactDOM.createRoot(document.getElementById("root")).render(
  <TextArea
    placeholder="Insert some text here..."
    onValueChange={(val) => console.log(val)}
  />
);</span></code></pre>
<p data-line="42">Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña <strong>Web 8080</strong> para previsualizar la página web.</p>
</article></div></div><div class="pt-24 -mt-20 relative -z-10 anchor-item" id="resumen"></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="Resumen">Resumen</h2>
<p data-line="2">¡Felicitaciones! Has completado el laboratorio del Elemento <code><textarea></code> no controlado. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.</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">temas</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/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/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/sqlite">SQLite</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/redis">Redis</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><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/kali">Kali Linux</a></div><div class="mt-10"><p class="text-xs font-bold uppercase mt-10">compartir</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=Elemento%20%3Ctextarea%3E%20no%20controlado%20en%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.BG6AkNTw.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=Elemento%20%3Ctextarea%3E%20no%20controlado%20en%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.BG6AkNTw.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.BG6AkNTw.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">Relacionado <a href="/skilltrees/react" class="">React Cursos</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="/es/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=es" onerror="this.setAttribute('data-error', 1)" width="525" height="270" alt="Empezar con React" data-nuxt-img srcset="https://cover-creator.labex.io/quick-start-with-react.png?lang=es 1x, https://cover-creator.labex.io/quick-start-with-react.png?lang=es 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>Empezar con 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>Principiante</div></div></div></div></a></div><div class="col-span-12 sm:col-span-6 lg:col-span-4"><a href="/es/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=es" onerror="this.setAttribute('data-error', 1)" width="525" height="270" alt="Laboratorios de Práctica de React" data-nuxt-img srcset="https://cover-creator.labex.io/react-practice-labs.png?lang=es 1x, https://cover-creator.labex.io/react-practice-labs.png?lang=es 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>Laboratorios de Práctica de 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>Principiante</div></div></div></div></a></div><div class="col-span-12 sm:col-span-6 lg:col-span-4"><a href="/es/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=es" onerror="this.setAttribute('data-error', 1)" width="525" height="270" alt="Desafíos de Práctica en React" data-nuxt-img srcset="https://cover-creator.labex.io/react-practice-challenges.png?lang=es 1x, https://cover-creator.labex.io/react-practice-challenges.png?lang=es 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>Desafíos de Práctica en 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>Principiante</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>Cambiar Idioma</span></button></div></div></div></div></div><p class="mt-4 mb-4 text-gray-400">Aprende Linux, DevOps y Ciberseguridad con Laboratorios Prácticos</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/devops" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn DevOps</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">Learn Cybersecurity</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/database" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Database</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/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/kali" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Kali Linux</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="/es/forum" class="hover:text-white">FORUM</a><span class="text-gray-600">|</span><a href="/es/interview-questions" class="hover:text-white">INTERVIEW QUESTIONS</a><span class="text-gray-600">|</span><a href="/es/teams" class="hover:text-white">LABEX TEAMS</a><span class="text-gray-600">|</span><a href="https://labex.io/es/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="/es/privacy" class="hover:text-white">PRIVACY POLICY</a><span class="text-gray-600">|</span><a href="/es/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.BG6AkNTw.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.BG6AkNTw.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.BG6AkNTw.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.BG6AkNTw.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.BG6AkNTw.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.BG6AkNTw.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.BG6AkNTw.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.BG6AkNTw.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":309,"once":581,"_errors":582,"serverRendered":10,"path":583},{"tutorialDetail-react-uncontrolled-textarea-element-38365-es":3,"skillTreeListData":58,"tutorialRecommendCourseListData":166,"skillTreeDetailData":189},{"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,"Elemento \u003Ctextarea> no controlado",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","En este laboratorio, aprenderemos cómo crear un elemento \u003Ctextarea> no controlado en React. El objetivo de este laboratorio es mostrar cómo usar las propiedades defaultValue y onChange para pasar el valor del área de texto a una función de devolución de llamada en el componente padre. Al final de este laboratorio, tendrás una mejor comprensión de cómo crear campos de entrada no controlados en React.",4,"https://github.com/labex-labs/open-source-labs/tree/master/react/30-seconds-of-react/lab-text-area","Elemento \u003Ctextarea> no controlado en React","Aprende cómo crear un elemento \u003Ctextarea> no controlado en React, usando las propiedades defaultValue y onChange para pasar el valor a una función de devolución de llamada.","react, entrada no controlada, 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},"Introducción","doc-fullscreen","## Introducción\n\nEn este laboratorio, aprenderemos cómo crear un elemento `\u003Ctextarea>` no controlado en React. El objetivo de este laboratorio es mostrar cómo usar las propiedades `defaultValue` y `onChange` para pasar el valor del área de texto a una función de devolución de llamada en el componente padre. Al final de este laboratorio, tendrás una mejor comprensión de cómo crear campos de entrada no controlados en 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{{\"Elemento \u003Ctextarea> no controlado\"}}\n  end\n```",{"position":49,"title":6,"layout":50,"text":51,"need_verify":10,"has_solution":12},1,"doc-workbench-split","## Elemento `\u003Ctextarea>` no controlado\n\n> `index.html` y `script.js` ya se han proporcionado en la máquina virtual. En general, solo es necesario agregar código a `script.js` y `style.css`.\n\nEsta función renderiza un elemento `\u003Ctextarea>` que no está controlado por el componente padre. Utiliza una función de devolución de llamada para pasar el valor de la entrada al componente padre.\n\nPara usar esta función:\n\n- Pase la propiedad `defaultValue` desde el componente padre como el valor inicial del campo de entrada.\n- Utilice el evento `onChange` para desencadenar la devolución de llamada `onValueChange` y enviar el nuevo valor al padre.\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\nUso de ejemplo:\n\n```jsx\nReactDOM.createRoot(document.getElementById(\"root\")).render(\n  \u003CTextArea\n    placeholder=\"Insert some text here...\"\n    onValueChange={(val) => console.log(val)}\n  />\n);\n```\n\nHaga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña **Web 8080** para previsualizar la página web.\n",{"position":53,"title":54,"layout":46,"text":55,"need_verify":12,"has_solution":12},2,"Resumen","## Resumen\n\n¡Felicitaciones! Has completado el laboratorio del Elemento `\u003Ctextarea>` no controlado. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.\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,159,162,163],{"alias":61,"name":62},"linux","Linux",{"alias":64,"name":65},"devops","DevOps",{"alias":67,"name":68},"cybersecurity","Cybersecurity",{"alias":70,"name":71},"database","Database",{"alias":73,"name":74},"python","Python",{"alias":76,"name":77},"docker","Docker",{"alias":79,"name":80},"kubernetes","Kubernetes",{"alias":82,"name":83},"git","Git",{"alias":85,"name":86},"shell","Shell",{"alias":88,"name":89},"nmap","Nmap",{"alias":91,"name":92},"wireshark","Wireshark",{"alias":94,"name":95},"hydra","Hydra",{"alias":97,"name":98},"java","Java",{"alias":100,"name":101},"bigdata","Big Data",{"alias":103,"name":104},"sqlite","SQLite",{"alias":106,"name":107},"postgresql","PostgreSQL",{"alias":109,"name":110},"mysql","MySQL",{"alias":112,"name":113},"redis","Redis",{"alias":115,"name":116},"mongodb","MongoDB",{"alias":118,"name":119},"go","Golang",{"alias":121,"name":122},"cpp","C++",{"alias":124,"name":125},"c","C",{"alias":127,"name":128},"ansible","Ansible",{"alias":130,"name":131},"datascience","Data Science",{"alias":133,"name":134},"ml","Machine Learning",{"alias":136,"name":137},"pandas","Pandas",{"alias":139,"name":140},"numpy","NumPy",{"alias":142,"name":143},"sklearn","scikit-learn",{"alias":145,"name":146},"matplotlib","Matplotlib",{"alias":148,"name":149},"webdev","Web Development",{"alias":151,"name":152},"alibaba","Alibaba Cloud",{"alias":154,"name":155},"html","HTML",{"alias":157,"name":158},"css","CSS",{"alias":160,"name":161},"javascript","JavaScript",{"alias":19,"name":20},{"alias":164,"name":165},"kali","Kali Linux",{"courses":167},[168,175,182],{"id":169,"alias":170,"name":171,"cover":172,"user_count":173,"level":49,"fee_type":7,"lab_coins":7,"tags":174,"type":7,"status":49,"has_cert":10,"hidden":12},1401,"quick-start-with-react","Empezar con React","https://cover-creator.labex.io/quick-start-with-react.png?lang=es",450,[20],{"id":176,"alias":177,"name":178,"cover":179,"user_count":180,"level":49,"fee_type":7,"lab_coins":7,"tags":181,"type":7,"status":49,"has_cert":12,"hidden":12},6336,"react-practice-labs","Laboratorios de Práctica de React","https://cover-creator.labex.io/react-practice-labs.png?lang=es",64,[20],{"id":183,"alias":184,"name":185,"cover":186,"user_count":187,"level":49,"fee_type":7,"lab_coins":7,"tags":188,"type":7,"status":49,"has_cert":12,"hidden":12},6335,"react-practice-challenges","Desafíos de Práctica en React","https://cover-creator.labex.io/react-practice-challenges.png?lang=es",24,[20],{"path":190,"team":308},{"id":191,"alias":19,"name":20,"img_url":192,"course_count":193,"hours":194,"enable_uid":12,"skills_count":195,"is_online":10,"is_followed":12,"has_cert":10,"cert_threshold":196,"skilltree":19,"project_count":197,"category":21,"followers_count":198,"tags":199,"url":21,"description":200,"icon":21,"authors":201,"levels":202,"learned_skills_count":7,"is_path_group":12,"groups":288,"meta_title":289,"meta_description":290,"meta_keywords":291,"parent_paths":292,"langs":306,"first_lab_alias":307,"first_course_alias":170},40,"https://file.labex.io/path/nUDMNpUKFvpT.png",3,30,13,9000,11,3166,[],"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.",[],[203,218],{"level":49,"name":204,"courses":205},"courses",[206,210,214],{"id":169,"alias":170,"name":207,"cover":208,"user_count":173,"level":49,"fee_type":7,"lab_coins":7,"tags":209,"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":176,"alias":177,"name":211,"cover":212,"user_count":180,"level":49,"fee_type":7,"lab_coins":7,"tags":213,"type":7,"status":49,"has_cert":12,"hidden":12},"React Practice Labs","https://cover-creator.labex.io/react-practice-labs.png",[20],{"id":183,"alias":184,"name":215,"cover":216,"user_count":187,"level":49,"fee_type":7,"lab_coins":7,"tags":217,"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":219,"courses":220},"projects",[221,228,234,240,246,252,258,264,270,276,282],{"id":222,"alias":223,"name":224,"cover":225,"user_count":226,"level":49,"fee_type":7,"lab_coins":7,"tags":227,"type":193,"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,158,161,155],{"id":229,"alias":230,"name":231,"cover":232,"user_count":53,"level":53,"fee_type":7,"lab_coins":7,"tags":233,"type":193,"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",[155,20,158,161],{"id":235,"alias":236,"name":237,"cover":238,"user_count":30,"level":49,"fee_type":7,"lab_coins":7,"tags":239,"type":193,"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",[158,161,20],{"id":241,"alias":242,"name":243,"cover":244,"user_count":7,"level":53,"fee_type":7,"lab_coins":7,"tags":245,"type":193,"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",[161,20,158],{"id":247,"alias":248,"name":249,"cover":250,"user_count":7,"level":53,"fee_type":7,"lab_coins":7,"tags":251,"type":193,"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,161],{"id":253,"alias":254,"name":255,"cover":256,"user_count":7,"level":53,"fee_type":7,"lab_coins":7,"tags":257,"type":193,"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,161],{"id":259,"alias":260,"name":261,"cover":262,"user_count":53,"level":53,"fee_type":7,"lab_coins":7,"tags":263,"type":193,"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,161],{"id":265,"alias":266,"name":267,"cover":268,"user_count":53,"level":53,"fee_type":7,"lab_coins":7,"tags":269,"type":193,"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,161],{"id":271,"alias":272,"name":273,"cover":274,"user_count":49,"level":53,"fee_type":7,"lab_coins":7,"tags":275,"type":193,"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,161],{"id":277,"alias":278,"name":279,"cover":280,"user_count":53,"level":49,"fee_type":7,"lab_coins":7,"tags":281,"type":193,"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,161],{"id":283,"alias":284,"name":285,"cover":286,"user_count":53,"level":49,"fee_type":7,"lab_coins":7,"tags":287,"type":193,"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",[293],{"id":294,"alias":295,"name":149,"img_url":296,"course_count":297,"hours":298,"enable_uid":12,"skills_count":299,"is_online":10,"is_followed":12,"has_cert":12,"cert_threshold":300,"skilltree":295,"project_count":301,"category":21,"followers_count":302,"tags":303,"url":21,"description":304,"icon":21,"authors":305},71,"web-development","https://file.labex.io/path/NHa0nG5axMBE.png",6,300,105,8000,254,2656,[],"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":310,"$scolor-mode":311,"$suser":-1,"$scopywriting":313,"$sjoined_teams":567,"$sowned_teams":568,"$sjoined_skill_strees":569,"$sget_joined_skill_strees_pending":10,"$suser_streaks":570,"$stoday_get_streak":12,"$snext_skill_badge":570,"$snext_streak_badge":570,"$slabby_settings":571,"$schat_list":573,"$schat_pending":10,"$schat_branch":12,"$schat_error_msg":21,"$schat_background":570,"$sstep_questins":574,"$sshow_panel":12,"$sshow_transition":10,"$stransition_height":7,"$spanel_width":7,"$sacquired_badges":575,"$sstop_generating":12,"$scan_stop_generating":12,"$sshow_driver":12,"$scurrent_lab_steps":576,"$scurrent_step_index":7,"$ssite-config":577},{},{"preference":312,"value":312,"unknown":10,"forced":12},"light",[314,326,403,544,554,562],{"key":315,"text":316,"tags":317,"data":319},"modal","🚀 Since 2017, Trusted by 300k Learners, Alibaba Cloud Training Partner",[318],"free_user",{"close":320,"confirm_button":321,"title":325},{"hours":187},{"label":322,"type":323,"url":324},"Level Up With LabEx Pro","link","/pricing","Free Plan Limited to 3 VM Launches Per Day",{"key":327,"text":21,"tags":328,"data":329},"country_codes",[318],{"codes":330},[331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400],{"code":332,"emoji":333},"IN","🇮🇳",{"code":335,"emoji":336},"ID","🇮🇩",{"code":338,"emoji":339},"EG","🇪🇬",{"code":341,"emoji":342},"PK","🇵🇰",{"code":344,"emoji":345},"MY","🇲🇾",{"code":347,"emoji":348},"VN","🇻🇳",{"code":350,"emoji":351},"UG","🇺🇬",{"code":353,"emoji":354},"PH","🇵🇭",{"code":356,"emoji":357},"BR","🇧🇷",{"code":359,"emoji":360},"ET","🇪🇹",{"code":362,"emoji":363},"BD","🇧🇩",{"code":365,"emoji":366},"NG","🇳🇬",{"code":368,"emoji":369},"KE","🇰🇪",{"code":371,"emoji":372},"IR","🇮🇷",{"code":374,"emoji":375},"MX","🇲🇽",{"code":377,"emoji":378},"TR","🇹🇷",{"code":380,"emoji":381},"DZ","🇩🇿",{"code":383,"emoji":384},"SD","🇸🇩",{"code":386,"emoji":387},"AO","🇦🇴",{"code":389,"emoji":390},"PE","🇵🇪",{"code":392,"emoji":393},"GH","🇬🇭",{"code":395,"emoji":396},"MZ","🇲🇿",{"code":398,"emoji":399},"IQ","🇮🇶",{"code":401,"emoji":402},"UZ","🇺🇿",{"key":404,"text":405,"tags":406,"data":410},"footer","footer 配置，缓存 1 分钟，修改后 1 分钟生效\t\n",[318,407,408,409],"not_logged_in","pro_user","trial_user",{"footer":411},[412,445,478,511],{"items":413,"name":444},[414,417,420,423,426,429,432,435,438,441],{"name":415,"url":416},"Learn Linux","https://labex.io/skilltrees/linux",{"name":418,"url":419},"Learn DevOps","https://labex.io/skilltrees/devops",{"name":421,"url":422},"Learn Cybersecurity","https://labex.io/skilltrees/cybersecurity",{"name":424,"url":425},"Learn Database","https://labex.io/skilltrees/database",{"name":427,"url":428},"Learn Python","https://labex.io/skilltrees/python",{"name":430,"url":431},"Learn Docker","https://labex.io/skilltrees/docker",{"name":433,"url":434},"Learn Java","https://labex.io/skilltrees/java",{"name":436,"url":437},"Learn Jenkins","https://labex.io/skilltrees/jenkins",{"name":439,"url":440},"Learn Machine Learning","https://labex.io/skilltrees/ml",{"name":442,"url":443},"Learn Kali Linux","https://labex.io/skilltrees/kali","LEARNING PATH",{"items":446,"name":477},[447,450,453,456,459,462,465,468,471,474],{"name":448,"url":449},"All Interactive Tutorials","https://labex.io/tutorials",{"name":451,"url":452},"Linux Projects","https://labex.io/projects/category/linux",{"name":454,"url":455},"Python Projects","https://labex.io/projects/category/python",{"name":457,"url":458},"Java Projects","https://labex.io/projects/category/java",{"name":460,"url":461},"Numpy Projects","https://labex.io/projects/category/numpy",{"name":463,"url":464},"Linux Tutorial","https://labex.io/tutorials/category/linux",{"name":466,"url":467},"Docker Tutorial","https://labex.io/tutorials/category/docker",{"name":469,"url":470},"Cybersecurity tutorial","https://labex.io/tutorials/category/cybersecurity",{"name":472,"url":473},"Free Labs","https://labex.io/free-labs",{"name":475,"url":476},"Linux Commands Cheat Sheet","https://linux-commands.labex.io/","PROJECTS & TUTORIALS",{"items":479,"name":510},[480,483,486,489,492,495,498,501,504,507],{"name":481,"url":482},"Online Linux Terminal","https://labex.io/tutorials/linux-online-linux-playground-372915",{"name":484,"url":485},"Online Docker Playground","https://labex.io/tutorials/docker-online-docker-playground-372912",{"name":487,"url":488},"Online Python Playground","https://labex.io/tutorials/python-online-python-playground-372886",{"name":490,"url":491},"Online Golang Playground","https://labex.io/tutorials/go-online-golang-playground-372913",{"name":493,"url":494},"Online C++ Playground","https://labex.io/tutorials/cpp-online-c-playground-372911",{"name":496,"url":497},"Online Java Playground","https://labex.io/tutorials/java-online-java-playground-372914",{"name":499,"url":500},"Online Rust Playground","https://labex.io/tutorials/rust-online-rust-playground-372918",{"name":502,"url":503},"Online MySQL Playground","https://labex.io/tutorials/mysql-online-mysql-playground-372916",{"name":505,"url":506},"Online Ansible Playground","https://labex.io/tutorials/ansible-online-ansible-playground-415831",{"name":508,"url":509},"Online Jenkins Playground","https://labex.io/tutorials/jenkins-online-jenkins-playground-415838","PLAYGROUNDS",{"items":512,"name":543},[513,516,519,522,525,528,531,534,537,540],{"name":514,"url":515},"Python Itertools Combinations","https://labex.io/tutorials/python-how-to-use-itertools-combinations-in-python-398083",{"name":517,"url":518},"Docker Compose with Host Network","https://labex.io/tutorials/docker-how-to-use-docker-compose-with-host-network-configuration-394882",{"name":520,"url":521},"Systemctl daemon-reload in Linux","https://labex.io/tutorials/linux-linux-systemctl-daemon-reload-390500",{"name":523,"url":524},"Match Patterns with Bash Regex","https://labex.io/tutorials/shell-bash-regex-matching-391551",{"name":526,"url":527},"DevOps Free Labs","https://labex.io/free-labs/devops",{"name":529,"url":530},"Find Key with Max Value in Python Dictionary","https://labex.io/tutorials/python-key-of-max-value-13677",{"name":532,"url":533},"Linux Free Labs","https://labex.io/free-labs/linux",{"name":535,"url":536},"Bash Function Return Values","https://labex.io/tutorials/shell-bash-function-return-values-391153",{"name":538,"url":539},"Area and Circumference of a Circle in C","https://labex.io/tutorials/c-circle-area-and-circumference-in-c-123197",{"name":541,"url":542},"Cybersecurity Free Labs","https://labex.io/free-labs/cybersecurity","LATEST TUTORIALS",{"key":545,"text":546,"tags":547,"data":548},"free_labs_page","free labs 页面 TDK",[318,409,408,407],{"free_labs_page":549},{"description":550,"meta_description":551,"meta_keywords":552,"meta_title":553,"title":472},"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":555,"text":21,"tags":556,"data":557},"interview_questions_page",[409,318,408,407],{"interview_questions_page":558},{"description":559,"meta_description":551,"meta_keywords":552,"meta_title":560,"title":561},"Practice real-world interview challenges with hands-on labs and AI  guidance","Technical Interview Questions | Interactive Practice in 30+ Tech Fields","Technical  Interview Questions",{"key":563,"text":564,"tags":565,"data":566},"ai_check","ai inspect 是否开启",[318,409,408],{"ai_check":10},[],[],[],null,{"fontSize":572,"darkTheme":12,"monitoring":12},"md",[],[],[],[],{"currentLocale":37,"defaultLocale":42,"env":578,"name":579,"url":580},"production","LabEx","https://labex.io",["Set"],{"tutorialDetail-react-uncontrolled-textarea-element-38365-es":570,"skillTreeDetailData":570,"skillTreeListData":570,"tutorialRecommendCourseListData":570},"/es/tutorials/react-uncontrolled-textarea-element-38365"]</script>
<script>window.__NUXT__={};window.__NUXT__.config={public:{turnstile:{siteKey:"0x4AAAAAAAKM2eNgDcxF-9yH"},env:"production",appVersion:"da51d64",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":"es","name":"LabEx","url":"https://labex.io"},{"@id":"https://labex.io/es/tutorials/react-uncontrolled-textarea-element-38365#webpage","@type":"WebPage","description":"Aprende cómo crear un elemento \u003Ctextarea> no controlado en React, usando las propiedades defaultValue y onChange para pasar el valor a una función de devolución de llamada.","name":"Elemento \u003Ctextarea> no controlado en React | LabEx","url":"https://labex.io/es/tutorials/react-uncontrolled-textarea-element-38365","isPartOf":{"@id":"https://labex.io#website"},"potentialAction":[{"@type":"ReadAction","target":["https://labex.io/es/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":"934d2f85493211ab","version":"2025.4.0-1-g37f21b1","serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"token":"c26e5c2e7aa04b40b4143b15a6e3e798","b":1}' crossorigin="anonymous"></script>