Неуправляемый элемент <textarea> в React

Введение

В этом практическом занятии мы узнаем, как создавать элемент <textarea>, не контролируемый в React. Целью этого практического занятия является демонстрация использования свойств defaultValue и onChange для передачи значения текстового поля в функцию обратного вызова в родительском компоненте. В конце этого практического занятия у вас будет лучше понимание того, как создавать неконтролируемые поля ввода в 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{{"Неуправляемый элемент

"}}
  end</div></article></div></div><div class="pt-24 -mt-20 relative -z-10 anchor-item" id="%D0%BD%D0%B5%D1%83%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D1%8F%D0%B5%D0%BC%D1%8B%D0%B9-%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82-%3Ctextarea%3E"></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="Неуправляемый элемент <textarea>">Неуправляемый элемент <textarea></h2>
<blockquote data-line="2">
<p>В ВМ уже предоставлены <code>index.html</code> и <code>script.js</code>. В общем, вам нужно только добавить код в <code>script.js</code> и <code>style.css</code>.</p>
</blockquote>
<p data-line="4">Эта функция отображает элемент <code><textarea></code>, который не контролируется родительским компонентом. Она использует функцию обратного вызова для передачи значения ввода в родительский компонент.</p>
<p data-line="6">Для использования этой функции:</p>
<ul data-line="8">
<li>Передайте свойство <code>defaultValue</code> из родительского компонента в качестве начального значения поля ввода.</li>
<li>Используйте событие <code>onChange</code> для вызова обратного вызова <code>onValueChange</code> и отправки нового значения в родительский компонент.</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">Пример использования:</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">Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку <strong>Web 8080</strong>, чтобы просмотреть веб-страницу.</p>
</article></div></div><div class="pt-24 -mt-20 relative -z-10 anchor-item" id="%D1%80%D0%B5%D0%B7%D1%8E%D0%BC%D0%B5"></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="Резюме">Резюме</h2>
<p data-line="2">Поздравляем! Вы завершили практическое занятие по неуправляемым элементам <code><textarea></code>. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.</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">Темы</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">Поделиться</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=%D0%9D%D0%B5%D1%83%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D1%8F%D0%B5%D0%BC%D1%8B%D0%B9%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%20%3Ctextarea%3E%20%D0%B2%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.CYiiSFKQ.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=%D0%9D%D0%B5%D1%83%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D1%8F%D0%B5%D0%BC%D1%8B%D0%B9%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%20%3Ctextarea%3E%20%D0%B2%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.CYiiSFKQ.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.CYiiSFKQ.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">Связанные <a href="/skilltrees/react" class="">React Курсы</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="/ru/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=ru" onerror="this.setAttribute('data-error', 1)" width="525" height="270" alt="Начало работы с React" data-nuxt-img srcset="https://cover-creator.labex.io/quick-start-with-react.png?lang=ru 1x, https://cover-creator.labex.io/quick-start-with-react.png?lang=ru 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>Начало работы с 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>Начинающий</div></div></div></div></a></div><div class="col-span-12 sm:col-span-6 lg:col-span-4"><a href="/ru/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=ru" onerror="this.setAttribute('data-error', 1)" width="525" height="270" alt="Практические лабораторные работы по React" data-nuxt-img srcset="https://cover-creator.labex.io/react-practice-labs.png?lang=ru 1x, https://cover-creator.labex.io/react-practice-labs.png?lang=ru 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>Практические лабораторные работы по 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>Начинающий</div></div></div></div></a></div><div class="col-span-12 sm:col-span-6 lg:col-span-4"><a href="/ru/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=ru" onerror="this.setAttribute('data-error', 1)" width="525" height="270" alt="Задачи для практики в React" data-nuxt-img srcset="https://cover-creator.labex.io/react-practice-challenges.png?lang=ru 1x, https://cover-creator.labex.io/react-practice-challenges.png?lang=ru 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>Задачи для практики в 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>Начинающий</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-469eddc1><div data-headlessui-state class="relative inline-flex text-left rtl:text-right" data-v-469eddc1><div id="headlessui-menu-button-2jHQtkq50D:0" aria-haspopup="menu" aria-expanded="false" data-headlessui-state class="inline-flex w-full" role="button" data-n-ids="{"2jHQtkq50D:0":"2jHQtkq50D: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-469eddc1><span class="i-heroicons-globe-alt" data-v-469eddc1></span><span data-v-469eddc1>Сменить язык</span></button></div></div></div></div></div><p class="mt-4 mb-4 text-gray-400">Изучайте Linux, DevOps и кибербезопасность с помощью практических лабораторий</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="/ru/forum" class="hover:text-white">FORUM</a><span class="text-gray-600">|</span><a href="/ru/interview-questions" class="hover:text-white">INTERVIEW QUESTIONS</a><span class="text-gray-600">|</span><a href="/ru/teams" class="hover:text-white">LABEX TEAMS</a><span class="text-gray-600">|</span><a href="https://labex.io/ru/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="/ru/privacy" class="hover:text-white">PRIVACY POLICY</a><span class="text-gray-600">|</span><a href="/ru/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.CYiiSFKQ.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.CYiiSFKQ.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.CYiiSFKQ.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.CYiiSFKQ.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.CYiiSFKQ.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.CYiiSFKQ.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.CYiiSFKQ.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.CYiiSFKQ.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-ru":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,"Неуправляемый элемент \u003Ctextarea>",0,"Beginner",5,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","В этом практическом занятии мы узнаем, как создавать элемент \u003Ctextarea>, не контролируемый в React. Целью этого практического занятия является демонстрация использования свойств defaultValue и onChange для передачи значения текстового поля в функцию обратного вызова в родительском компоненте. В конце этого практического занятия у вас будет лучше понимание того, как создавать неконтролируемые поля ввода в React.",4,"https://github.com/labex-labs/open-source-labs/tree/master/react/30-seconds-of-react/lab-text-area","Неуправляемый элемент \u003Ctextarea> в React","Изучите, как создать неуправляемый элемент textarea в React, используя свойства defaultValue и onChange для передачи значения в функцию обратного вызова.","react, неконтролируемый ввод, 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},"Введение","doc-fullscreen","## Введение\n\nВ этом практическом занятии мы узнаем, как создавать элемент `\u003Ctextarea>`, не контролируемый в React. Целью этого практического занятия является демонстрация использования свойств `defaultValue` и `onChange` для передачи значения текстового поля в функцию обратного вызова в родительском компоненте. В конце этого практического занятия у вас будет лучше понимание того, как создавать неконтролируемые поля ввода в 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{{\"Неуправляемый элемент \u003Ctextarea>\"}}\n  end\n```",{"position":49,"title":6,"layout":50,"text":51,"need_verify":10,"has_solution":12},1,"doc-workbench-split","## Неуправляемый элемент \u003Ctextarea>\n\n> В ВМ уже предоставлены `index.html` и `script.js`. В общем, вам нужно только добавить код в `script.js` и `style.css`.\n\nЭта функция отображает элемент `\u003Ctextarea>`, который не контролируется родительским компонентом. Она использует функцию обратного вызова для передачи значения ввода в родительский компонент.\n\nДля использования этой функции:\n\n- Передайте свойство `defaultValue` из родительского компонента в качестве начального значения поля ввода.\n- Используйте событие `onChange` для вызова обратного вызова `onValueChange` и отправки нового значения в родительский компонент.\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\nПример использования:\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\nПожалуйста, нажмите кнопку \"Go Live\" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку **Web 8080**, чтобы просмотреть веб-страницу.\n",{"position":53,"title":54,"layout":46,"text":55,"need_verify":12,"has_solution":12},2,"Резюме","## Резюме\n\nПоздравляем! Вы завершили практическое занятие по неуправляемым элементам `\u003Ctextarea>`. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.\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","Начало работы с React","https://cover-creator.labex.io/quick-start-with-react.png?lang=ru",458,[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","Практические лабораторные работы по React","https://cover-creator.labex.io/react-practice-labs.png?lang=ru",69,[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","Задачи для практики в React","https://cover-creator.labex.io/react-practice-challenges.png?lang=ru",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,3361,[],"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":53,"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,3066,[],"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":41,"defaultLocale":42,"env":578,"name":579,"url":580},"production","LabEx","https://labex.io",["Set"],{"tutorialDetail-react-uncontrolled-textarea-element-38365-ru":570,"skillTreeDetailData":570,"skillTreeListData":570,"tutorialRecommendCourseListData":570},"/ru/tutorials/react-uncontrolled-textarea-element-38365"]</script>
<script>window.__NUXT__={};window.__NUXT__.config={public:{turnstile:{siteKey:"0x4AAAAAAAKM2eNgDcxF-9yH"},env:"production",appVersion:"8a98217",cookie:{domain:""},gtag:{id:"G-ZFCX52ZJTZ"},ads:{id:"AW-882002536",registerConversionTag:"MBFrCIGFxNQYEOiUyaQD",subscriptionConversionTag:"crfuCO_z2tQYEOiUyaQD",purchaseConversionTag:"53Q2COvEvO0YEOiUyaQD"},gtm:{id:"GTM-TN7PC69C"},clarityProjectId:"qfnofdz0u8",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":"ru","name":"LabEx","url":"https://labex.io"},{"@id":"https://labex.io/ru/tutorials/react-uncontrolled-textarea-element-38365#webpage","@type":"WebPage","description":"Изучите, как создать неуправляемый элемент textarea в React, используя свойства defaultValue и onChange для передачи значения в функцию обратного вызова.","name":"Неуправляемый элемент \u003Ctextarea> в React | LabEx","url":"https://labex.io/ru/tutorials/react-uncontrolled-textarea-element-38365","isPartOf":{"@id":"https://labex.io#website"},"potentialAction":[{"@type":"ReadAction","target":["https://labex.io/ru/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":"94158158bb04c94c","version":"2025.4.0-1-g37f21b1","serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"token":"c26e5c2e7aa04b40b4143b15a6e3e798","b":1}' crossorigin="anonymous"></script>