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

Введение

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

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

Неуправляемый элемент </h2> <blockquote> <p>В ВМ уже предоставлены <code>index.html</code> и <code>script.js</code>. В общем, вам нужно только добавить код в <code>script.js</code> и <code>style.css</code>.</p> </blockquote> <p>Эта функция отображает элемент <code><textarea></code>, который не контролируется родительским компонентом. Она использует функцию обратного вызова для передачи значения ввода в родительский компонент.</p> <p>Для использования этой функции:</p> <ul> <li>Передайте свойство <code>defaultValue</code> из родительского компонента в качестве начального значения поля ввода.</li> <li>Используйте событие <code>onChange</code> для вызова обратного вызова <code>onValueChange</code> и отправки нового значения в родительский компонент.</li> </ul> <pre><code class="language-jsx">const TextArea = ({ cols = 20, rows = 2, defaultValue, onValueChange, ...rest }) => { return ( <textarea cols={cols} rows={rows} defaultValue={defaultValue} onChange={({ target: { value } }) => onValueChange(value)} {...rest} /> ); }; </code></pre> <p>Пример использования:</p> <pre><code class="language-jsx">ReactDOM.createRoot(document.getElementById("root")).render( <TextArea placeholder="Insert some text here..." onValueChange={(val) => console.log(val)} /> ); </code></pre> <p>Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку <strong>Web 8080</strong>, чтобы просмотреть веб-страницу.</p> <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> <h2 id="резюме">Резюме</h2> <p>Поздравляем! Вы завершили практическое занятие по неуправляемым элементам <code><textarea></code>. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.</p>