Неуправляемый элемент <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/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></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.Co2Xg-TO.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.Co2Xg-TO.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.Co2Xg-TO.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-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>Сменить язык</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/python" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Python</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/docker" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Docker</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/mysql" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn MySQL</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/java" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Java</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/jenkins" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Jenkins</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/ml" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Learn Machine Learning</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/cybersecurity" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Cybersecurity Learning Path</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/devops" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">DevOps Learning Path</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/skilltrees/sklearn" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">scikit-learn Learning Path</a></div></div><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">PROJECTS & TUTORIALS</div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">All Interactive Tutorials</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/projects/category/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Linux Projects</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/projects/category/python" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Python Projects</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/projects/category/java" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Java Projects</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/projects/category/numpy" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Numpy Projects</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/category/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Linux Tutorial</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/category/docker" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Docker Tutorial</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/category/cybersecurity" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Cybersecurity tutorial</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/free-labs" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Free Labs</a></div><div class="flex flex-col gap-2"><a href="https://linux-commands.labex.io/" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Linux Commands Cheat Sheet</a></div></div><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">PLAYGROUNDS</div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/linux-online-linux-playground-372915" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Linux Terminal</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/docker-online-docker-playground-372912" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Docker Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/python-online-python-playground-372886" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Python Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/go-online-golang-playground-372913" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Golang Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/cpp-online-c-playground-372911" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online C++ Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/java-online-java-playground-372914" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Java Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/rust-online-rust-playground-372918" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Rust Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/mysql-online-mysql-playground-372916" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online MySQL Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/ansible-online-ansible-playground-415831" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Ansible Playground</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/jenkins-online-jenkins-playground-415838" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Online Jenkins Playground</a></div></div><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">LATEST TUTORIALS</div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/python-how-to-use-itertools-combinations-in-python-398083" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Python Itertools Combinations</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/docker-how-to-use-docker-compose-with-host-network-configuration-394882" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Docker Compose with Host Network</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/linux-linux-systemctl-daemon-reload-390500" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Systemctl daemon-reload in Linux</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/shell-bash-regex-matching-391551" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Match Patterns with Bash Regex</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/free-labs/devops" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">DevOps Free Labs</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/python-key-of-max-value-13677" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Find Key with Max Value in Python Dictionary</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/free-labs/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Linux Free Labs</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/shell-bash-function-return-values-391153" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Bash Function Return Values</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/tutorials/c-circle-area-and-circumference-in-c-123197" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Area and Circumference of a Circle in C</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/free-labs/cybersecurity" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Cybersecurity Free Labs</a></div></div></div><div class="flex flex-wrap justify-center items-center gap-2 text-sm text-gray-400"><a href="https://support.labex.io" target="_blank" class="hover:text-white">SUPPORT</a><span class="text-gray-600">|</span><a href="mailto:info@labex.io" class="hover:text-white">CONTACT US</a><span class="text-gray-600">|</span><a href="/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.Co2Xg-TO.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.Co2Xg-TO.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.Co2Xg-TO.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.Co2Xg-TO.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.Co2Xg-TO.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.Co2Xg-TO.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.Co2Xg-TO.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.Co2Xg-TO.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":303,"once":570,"_errors":571,"serverRendered":10,"path":572},{"tutorialDetail-react-uncontrolled-textarea-element-38365-ru":3,"skillTreeListData":58,"tutorialRecommendCourseListData":160,"skillTreeDetailData":183},{"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",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","В этом практическом занятии мы узнаем, как создавать элемент \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],{"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},"postgresql","PostgreSQL",{"alias":106,"name":107},"mysql","MySQL",{"alias":109,"name":110},"redis","Redis",{"alias":112,"name":113},"mongodb","MongoDB",{"alias":115,"name":116},"go","Golang",{"alias":118,"name":119},"cpp","C++",{"alias":121,"name":122},"c","C",{"alias":124,"name":125},"ansible","Ansible",{"alias":127,"name":128},"datascience","Data Science",{"alias":130,"name":131},"ml","Machine Learning",{"alias":133,"name":134},"pandas","Pandas",{"alias":136,"name":137},"numpy","NumPy",{"alias":139,"name":140},"sklearn","scikit-learn",{"alias":142,"name":143},"matplotlib","Matplotlib",{"alias":145,"name":146},"webdev","Web Development",{"alias":148,"name":149},"alibaba","Alibaba Cloud",{"alias":151,"name":152},"html","HTML",{"alias":154,"name":155},"css","CSS",{"alias":157,"name":158},"javascript","JavaScript",{"alias":19,"name":20},{"courses":161},[162,169,176],{"id":163,"alias":164,"name":165,"cover":166,"user_count":167,"level":49,"fee_type":7,"lab_coins":7,"tags":168,"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",445,[20],{"id":170,"alias":171,"name":172,"cover":173,"user_count":174,"level":49,"fee_type":7,"lab_coins":7,"tags":175,"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",61,[20],{"id":177,"alias":178,"name":179,"cover":180,"user_count":181,"level":49,"fee_type":7,"lab_coins":7,"tags":182,"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":184,"team":302},{"id":185,"alias":19,"name":20,"img_url":186,"course_count":187,"hours":188,"enable_uid":12,"skills_count":189,"is_online":10,"is_followed":12,"has_cert":10,"cert_threshold":190,"skilltree":19,"project_count":191,"category":21,"followers_count":192,"tags":193,"url":21,"description":194,"icon":21,"authors":195,"levels":196,"learned_skills_count":7,"is_path_group":12,"groups":282,"meta_title":283,"meta_description":284,"meta_keywords":285,"parent_paths":286,"langs":300,"first_lab_alias":301,"first_course_alias":164},40,"https://file.labex.io/path/nUDMNpUKFvpT.png",3,30,13,9000,11,3087,[],"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.",[],[197,212],{"level":49,"name":198,"courses":199},"courses",[200,204,208],{"id":163,"alias":164,"name":201,"cover":202,"user_count":167,"level":49,"fee_type":7,"lab_coins":7,"tags":203,"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":170,"alias":171,"name":205,"cover":206,"user_count":174,"level":49,"fee_type":7,"lab_coins":7,"tags":207,"type":7,"status":49,"has_cert":12,"hidden":12},"React Practice Labs","https://cover-creator.labex.io/react-practice-labs.png",[20],{"id":177,"alias":178,"name":209,"cover":210,"user_count":181,"level":49,"fee_type":7,"lab_coins":7,"tags":211,"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":213,"courses":214},"projects",[215,222,228,234,240,246,252,258,264,270,276],{"id":216,"alias":217,"name":218,"cover":219,"user_count":220,"level":49,"fee_type":7,"lab_coins":7,"tags":221,"type":187,"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,155,158,152],{"id":223,"alias":224,"name":225,"cover":226,"user_count":53,"level":53,"fee_type":7,"lab_coins":7,"tags":227,"type":187,"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",[152,20,155,158],{"id":229,"alias":230,"name":231,"cover":232,"user_count":30,"level":49,"fee_type":7,"lab_coins":7,"tags":233,"type":187,"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",[155,158,20],{"id":235,"alias":236,"name":237,"cover":238,"user_count":7,"level":53,"fee_type":7,"lab_coins":7,"tags":239,"type":187,"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",[158,20,155],{"id":241,"alias":242,"name":243,"cover":244,"user_count":7,"level":53,"fee_type":7,"lab_coins":7,"tags":245,"type":187,"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,158],{"id":247,"alias":248,"name":249,"cover":250,"user_count":7,"level":53,"fee_type":7,"lab_coins":7,"tags":251,"type":187,"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,158],{"id":253,"alias":254,"name":255,"cover":256,"user_count":53,"level":53,"fee_type":7,"lab_coins":7,"tags":257,"type":187,"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,158],{"id":259,"alias":260,"name":261,"cover":262,"user_count":53,"level":53,"fee_type":7,"lab_coins":7,"tags":263,"type":187,"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,158],{"id":265,"alias":266,"name":267,"cover":268,"user_count":49,"level":53,"fee_type":7,"lab_coins":7,"tags":269,"type":187,"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,158],{"id":271,"alias":272,"name":273,"cover":274,"user_count":53,"level":49,"fee_type":7,"lab_coins":7,"tags":275,"type":187,"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,158],{"id":277,"alias":278,"name":279,"cover":280,"user_count":53,"level":49,"fee_type":7,"lab_coins":7,"tags":281,"type":187,"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",[287],{"id":288,"alias":289,"name":146,"img_url":290,"course_count":291,"hours":292,"enable_uid":12,"skills_count":293,"is_online":10,"is_followed":12,"has_cert":12,"cert_threshold":294,"skilltree":289,"project_count":295,"category":21,"followers_count":296,"tags":297,"url":21,"description":298,"icon":21,"authors":299},71,"web-development","https://file.labex.io/path/NHa0nG5axMBE.png",6,300,105,8000,254,2513,[],"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":304,"$scolor-mode":305,"$suser":-1,"$scopywriting":307,"$sjoined_teams":556,"$sowned_teams":557,"$sjoined_skill_strees":558,"$sget_joined_skill_strees_pending":10,"$suser_streaks":559,"$stoday_get_streak":12,"$snext_skill_badge":559,"$snext_streak_badge":559,"$slabby_settings":560,"$schat_list":562,"$schat_pending":10,"$schat_branch":12,"$schat_error_msg":21,"$schat_background":559,"$sstep_questins":563,"$sshow_panel":12,"$sshow_transition":10,"$stransition_height":7,"$spanel_width":7,"$sacquired_badges":564,"$sstop_generating":12,"$scan_stop_generating":12,"$sshow_driver":12,"$scurrent_lab_steps":565,"$scurrent_step_index":7,"$ssite-config":566},{},{"preference":306,"value":306,"unknown":10,"forced":12},"light",[308,320,397,538,548],{"key":309,"text":310,"tags":311,"data":313},"modal","🚀 Since 2017, Trusted by 300k Learners, Alibaba Cloud Training Partner",[312],"free_user",{"close":314,"confirm_button":315,"title":319},{"hours":181},{"label":316,"type":317,"url":318},"Level Up With LabEx Pro","link","/pricing","Free Plan Limited to 3 VM Launches Per Day",{"key":321,"text":21,"tags":322,"data":323},"country_codes",[312],{"codes":324},[325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394],{"code":326,"emoji":327},"IN","🇮🇳",{"code":329,"emoji":330},"ID","🇮🇩",{"code":332,"emoji":333},"EG","🇪🇬",{"code":335,"emoji":336},"PK","🇵🇰",{"code":338,"emoji":339},"MY","🇲🇾",{"code":341,"emoji":342},"VN","🇻🇳",{"code":344,"emoji":345},"UG","🇺🇬",{"code":347,"emoji":348},"PH","🇵🇭",{"code":350,"emoji":351},"BR","🇧🇷",{"code":353,"emoji":354},"ET","🇪🇹",{"code":356,"emoji":357},"BD","🇧🇩",{"code":359,"emoji":360},"NG","🇳🇬",{"code":362,"emoji":363},"KE","🇰🇪",{"code":365,"emoji":366},"IR","🇮🇷",{"code":368,"emoji":369},"MX","🇲🇽",{"code":371,"emoji":372},"TR","🇹🇷",{"code":374,"emoji":375},"DZ","🇩🇿",{"code":377,"emoji":378},"SD","🇸🇩",{"code":380,"emoji":381},"AO","🇦🇴",{"code":383,"emoji":384},"PE","🇵🇪",{"code":386,"emoji":387},"GH","🇬🇭",{"code":389,"emoji":390},"MZ","🇲🇿",{"code":392,"emoji":393},"IQ","🇮🇶",{"code":395,"emoji":396},"UZ","🇺🇿",{"key":398,"text":399,"tags":400,"data":404},"footer","footer 配置，缓存 1 分钟，修改后 1 分钟生效\t\n",[312,401,402,403],"not_logged_in","pro_user","trial_user",{"footer":405},[406,439,472,505],{"items":407,"name":438},[408,411,414,417,420,423,426,429,432,435],{"name":409,"url":410},"Learn Linux","https://labex.io/skilltrees/linux",{"name":412,"url":413},"Learn Python","https://labex.io/skilltrees/python",{"name":415,"url":416},"Learn Docker","https://labex.io/skilltrees/docker",{"name":418,"url":419},"Learn MySQL","https://labex.io/skilltrees/mysql",{"name":421,"url":422},"Learn Java","https://labex.io/skilltrees/java",{"name":424,"url":425},"Learn Jenkins","https://labex.io/skilltrees/jenkins",{"name":427,"url":428},"Learn Machine Learning","https://labex.io/skilltrees/ml",{"name":430,"url":431},"Cybersecurity Learning Path","https://labex.io/skilltrees/cybersecurity",{"name":433,"url":434},"DevOps Learning Path","https://labex.io/skilltrees/devops",{"name":436,"url":437},"scikit-learn Learning Path","https://labex.io/skilltrees/sklearn","LEARNING PATH",{"items":440,"name":471},[441,444,447,450,453,456,459,462,465,468],{"name":442,"url":443},"All Interactive Tutorials","https://labex.io/tutorials",{"name":445,"url":446},"Linux Projects","https://labex.io/projects/category/linux",{"name":448,"url":449},"Python Projects","https://labex.io/projects/category/python",{"name":451,"url":452},"Java Projects","https://labex.io/projects/category/java",{"name":454,"url":455},"Numpy Projects","https://labex.io/projects/category/numpy",{"name":457,"url":458},"Linux Tutorial","https://labex.io/tutorials/category/linux",{"name":460,"url":461},"Docker Tutorial","https://labex.io/tutorials/category/docker",{"name":463,"url":464},"Cybersecurity tutorial","https://labex.io/tutorials/category/cybersecurity",{"name":466,"url":467},"Free Labs","https://labex.io/free-labs",{"name":469,"url":470},"Linux Commands Cheat Sheet","https://linux-commands.labex.io/","PROJECTS & TUTORIALS",{"items":473,"name":504},[474,477,480,483,486,489,492,495,498,501],{"name":475,"url":476},"Online Linux Terminal","https://labex.io/tutorials/linux-online-linux-playground-372915",{"name":478,"url":479},"Online Docker Playground","https://labex.io/tutorials/docker-online-docker-playground-372912",{"name":481,"url":482},"Online Python Playground","https://labex.io/tutorials/python-online-python-playground-372886",{"name":484,"url":485},"Online Golang Playground","https://labex.io/tutorials/go-online-golang-playground-372913",{"name":487,"url":488},"Online C++ Playground","https://labex.io/tutorials/cpp-online-c-playground-372911",{"name":490,"url":491},"Online Java Playground","https://labex.io/tutorials/java-online-java-playground-372914",{"name":493,"url":494},"Online Rust Playground","https://labex.io/tutorials/rust-online-rust-playground-372918",{"name":496,"url":497},"Online MySQL Playground","https://labex.io/tutorials/mysql-online-mysql-playground-372916",{"name":499,"url":500},"Online Ansible Playground","https://labex.io/tutorials/ansible-online-ansible-playground-415831",{"name":502,"url":503},"Online Jenkins Playground","https://labex.io/tutorials/jenkins-online-jenkins-playground-415838","PLAYGROUNDS",{"items":506,"name":537},[507,510,513,516,519,522,525,528,531,534],{"name":508,"url":509},"Python Itertools Combinations","https://labex.io/tutorials/python-how-to-use-itertools-combinations-in-python-398083",{"name":511,"url":512},"Docker Compose with Host Network","https://labex.io/tutorials/docker-how-to-use-docker-compose-with-host-network-configuration-394882",{"name":514,"url":515},"Systemctl daemon-reload in Linux","https://labex.io/tutorials/linux-linux-systemctl-daemon-reload-390500",{"name":517,"url":518},"Match Patterns with Bash Regex","https://labex.io/tutorials/shell-bash-regex-matching-391551",{"name":520,"url":521},"DevOps Free Labs","https://labex.io/free-labs/devops",{"name":523,"url":524},"Find Key with Max Value in Python Dictionary","https://labex.io/tutorials/python-key-of-max-value-13677",{"name":526,"url":527},"Linux Free Labs","https://labex.io/free-labs/linux",{"name":529,"url":530},"Bash Function Return Values","https://labex.io/tutorials/shell-bash-function-return-values-391153",{"name":532,"url":533},"Area and Circumference of a Circle in C","https://labex.io/tutorials/c-circle-area-and-circumference-in-c-123197",{"name":535,"url":536},"Cybersecurity Free Labs","https://labex.io/free-labs/cybersecurity","LATEST TUTORIALS",{"key":539,"text":540,"tags":541,"data":542},"free_labs_page","free labs 页面 TDK",[312,403,402,401],{"free_labs_page":543},{"description":544,"meta_description":545,"meta_keywords":546,"meta_title":547,"title":466},"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":549,"text":21,"tags":550,"data":551},"interview_questions_page",[403,312,402,401],{"interview_questions_page":552},{"description":553,"meta_description":545,"meta_keywords":546,"meta_title":554,"title":555},"Practice real-world interview challenges with hands-on labs and AI  guidance","Technical Interview Questions | Interactive Practice in 30+ Tech Fields","Technical  Interview Questions",[],[],[],null,{"fontSize":561,"darkTheme":12,"monitoring":12},"md",[],[],[],[],{"currentLocale":41,"defaultLocale":42,"env":567,"name":568,"url":569},"production","LabEx","https://labex.io",["Set"],{"tutorialDetail-react-uncontrolled-textarea-element-38365-ru":559,"skillTreeDetailData":559,"skillTreeListData":559,"tutorialRecommendCourseListData":559},"/ru/tutorials/react-uncontrolled-textarea-element-38365"]</script>
<script>window.__NUXT__={};window.__NUXT__.config={public:{turnstile:{siteKey:"0x4AAAAAAAKM2eNgDcxF-9yH"},env:"production",appVersion:"b03c9b9",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":"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":"92f49c27ead245f5","version":"2025.3.0","serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"token":"c26e5c2e7aa04b40b4143b15a6e3e798","b":1}' crossorigin="anonymous"></script>