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