Кнопка очистки
Часть раздела Основы путешествия по React на Coddy — урок 31 из 42.
Вот суперсила управляемого input: так как состояние владеет текстом, ваш код может изменять поле, а не только пользователь. Сбросьте его откуда угодно:
<button onClick={() => setName('')}>Clear</button>Установите состояние в пустую строку, и поле очистится при следующем рендере, потому что value={name} всегда отображает состояние. В случае с неуправляемым инпутом вам пришлось бы обращаться к dom вручную; с состоянием это всего один вызов setName.
Задание
СреднеЗавершите редактор сообщений.
- Сделайте поле ввода (
id="message") управляемым с помощью состоянияmessage. - Отобразите черновик в абзаце (
id="draft"): текстDraft:, за которым следует сообщение. - Кнопка
id="clear"очищает сообщение.
Попробуйте сами
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Основы
1Знакомство с React
Что такое React?Ваш первый компонентПравило одного родителяJSX — это не HTMLИтоги: Знакомство с React