Menu
Coddy logo textTech
НАЧАТЬ УЧИТЬСЯ
flag Ru iconРусскийdown icon

Итоги: Формы и поля ввода

Часть раздела Основы путешествия по React на Coddy — урок 32 из 42.

challenge icon

Задание

Средне

Итоги главы. Создайте выбор никнейма с полным циклом управляемого ввода: ввод, просмотр результатов в реальном времени, очистка.

  1. Сделайте поле ввода (id="nick") управляемым с помощью состояния nick, изначально пустым.
  2. Абзац (id="meter") показывает N of 12, где N — текущая длина никнейма (например, ввод Coddy → 5 of 12), вычисляемая, а не хранимая в состоянии.
  3. Кнопка 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

4Пропсы (Props)

Что такое пропсы?Передача пропсовДва пропсаТот же компонент, новые данныеПроп childrenИтоги: пропсы

7Условия и списки

Тернарный рендерингОтображение с помощью &&Рендеринг спискаВажность ключейФильтрация, затем отображениеИтоги: Условия и списки

2Выражения JSX

Фигурные скобкиМатематика в скобкахСкобки в атрибутахВызов функций в JSXИтоги: Выражения JSX

5Состояние и события

Что такое состояние?Счетчик кликовСчетчик с шагомПереключение с помощью состоянияНезависимое состояниеИтоги: Состояние и события

8Проект: Карточка профиля

Шаг 1: Структура карточкиШаг 2: Карточка с пропсамиШаг 3: Кнопка «Мне нравится»Шаг 4: Переключатель подписки

3Компоненты

Базовые элементыВаш второй компонентПовторное использование компонентовСоздание страницы из компонентовИтоги: Компоненты

6Формы и поля ввода

Управляемые поля вводаВывод введенных данныхСчетчик символовКнопка очисткиИтоги: Формы и поля ввода