Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Челендж: Створення Компонента Форми | React Hooks and Context
Опановуємо React

Челендж: Створення Компонента ФормиЧелендж: Створення Компонента Форми

Завдання

У цьому завданні вам потрібно створити компонент Form з двома полями вводу: email та password. Мета полягає у використанні хука useRef для посилання на елементи вводу та обробки логіки відправки форми.

Інструкції

  1. Імпортуйте хук useRef з бібліотеки react.
  2. Усередині компонента Form оголосіть дві змінні useRef: emailRef та passwordRef, ініціалізовані null.
  3. Обнуліть поля введення, встановивши їх значення в порожній рядок за допомогою змінних useRef.
Hint
1. Щоб імпортувати необхідний хук з бібліотеки React, додайте import оператор.
2. Для цього завдання ми будемо використовувати хук useRef для зберігання даних не впливаючи на розмітку.
3. Щоб визначити відповідне ім’я змінної для посилання, виберіть слово яке пов’язано із посиланням, і додайте "Ref" в кінці.
4. Щоб ініціалізувати ref значенням null, передайте null як початкове значення в дужках хука useRef (наприклад, useRef(null)).
5. Щоб скинути вхідні дані форми, використовуйте відповідну змінну ref і призначте її .current.value порожній рядок ( "").
  1. To import the necessary hook from the React library, include an import statement.
  2. For this task, we will utilize the useRef hook to store data without affecting the markup.
  3. To determine the appropriate variable name for the ref, choose a word that is associated with the ref and add "Ref" at the end.
  4. To initialize the ref with null, pass null as the initial value in the brackets of the useRef hook (e.g., useRef(null)).
  5. To reset the form input, use the appropriate ref variable and assign its .current.value to an empty string ( "" ).

Все було зрозуміло?

Секція 3. Розділ 5
course content

Зміст курсу

Опановуємо React

1. Вступ до Основ React

Що таке React?SPA vs. MPA у Веб РозробціЯк React Працює з Віртуальним DOMЗнайомство з JSX в ReactСтворення Складних JSX Елементів Рендеринг Елементів у ReactЧелендж: Рендеринг ЕлементаКомпонент ReactПропси в ReactЧелендж: Функціональні КомпонентиУмовний РендерингЧелендж: Умовний Рендеринг КонтентуChallenge: Conditional Rendering - Bank AlertРендеринг Набору ДанихЧелендж: Рендеринг Набору ДанихВступ до Основ React Підсумок Розділу

2. Стилізація в React Додатках

Вступ до Стилізації в ReactВбудовані СтиліВбудовані Стилі на ПрактиціЧелендж: Вбудовані СтиліСтилізація за Допомогою CSS ФайлуСтилізація за Допомогою CSS файлу на ПрактиціЧелендж: Стилізація за Допомогою CSS ФайлуСтилізація за Допомогою CSS МодулівОрганізація Структури Файлів та ПапокЧелендж: CSS МодуліСтилізація в React Підсумок Розділу

3. React Хуки та Контекст

Вступ: React Хуки та КонтекстuseState ХукЧелендж: Перемикання ВидимостіuseRef ХукЧелендж: Створення Компонента ФормиuseEffect ХукЧелендж: Отримання та Відображення ДанихuseMemo ХукЧелендж: Фільтрація Списку АвтомобілівКонтекстКонтекст на ПрактиціЧелендж: World of Astronomy ДодатокReact Хуки та Контекст Підсумок Розділу

4. React в Реальному Світі

Налаштування СередовищаРедактор КодуНалаштування Папки ПроектуТерміналПочаток ПроектуReact в Реальному Світі Підсумок Розділу

Опановуємо React

Челендж: Створення Компонента ФормиЧелендж: Створення Компонента Форми

Завдання

У цьому завданні вам потрібно створити компонент Form з двома полями вводу: email та password. Мета полягає у використанні хука useRef для посилання на елементи вводу та обробки логіки відправки форми.

Інструкції

  1. Імпортуйте хук useRef з бібліотеки react.
  2. Усередині компонента Form оголосіть дві змінні useRef: emailRef та passwordRef, ініціалізовані null.
  3. Обнуліть поля введення, встановивши їх значення в порожній рядок за допомогою змінних useRef.
Hint
1. Щоб імпортувати необхідний хук з бібліотеки React, додайте import оператор.
2. Для цього завдання ми будемо використовувати хук useRef для зберігання даних не впливаючи на розмітку.
3. Щоб визначити відповідне ім’я змінної для посилання, виберіть слово яке пов’язано із посиланням, і додайте "Ref" в кінці.
4. Щоб ініціалізувати ref значенням null, передайте null як початкове значення в дужках хука useRef (наприклад, useRef(null)).
5. Щоб скинути вхідні дані форми, використовуйте відповідну змінну ref і призначте її .current.value порожній рядок ( "").
  1. To import the necessary hook from the React library, include an import statement.
  2. For this task, we will utilize the useRef hook to store data without affecting the markup.
  3. To determine the appropriate variable name for the ref, choose a word that is associated with the ref and add "Ref" at the end.
  4. To initialize the ref with null, pass null as the initial value in the brackets of the useRef hook (e.g., useRef(null)).
  5. To reset the form input, use the appropriate ref variable and assign its .current.value to an empty string ( "" ).

Все було зрозуміло?

Секція 3. Розділ 5
some-alt