Menu
Coddy logo textTech
ZACZNIJ NAUKĘ
flag Pl iconPolskidown icon

Podsumowanie: formularze i pola wejściowe

Część sekcji Podstawy ścieżki React w Coddy. Lekcja 32 z 42.

challenge icon

Wyzwanie

Średni

Podsumowanie rozdziału. Zbuduj selektor pseudonimu z pełną pętlą kontrolowanego pola tekstowego: wpisywanie, podgląd na bieżąco, czyszczenie.

  1. Ustaw pole tekstowe (id="nick") jako kontrolowane za pomocą stanu nick, którego początkowa wartość jest pusta.
  2. Akapit (id="meter") wyświetla N of 12, gdzie N to aktualna długość pseudonimu (np. wpisanie Coddy → 5 of 12); wartość ma być wyliczana, a nie przechowywana.
  3. Przycisk id="clear" czyści pseudonim, a wraz z nim pole tekstowe.

Spróbuj swoich sił

<!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>

Wszystkie lekcje w sekcji Podstawy

1Poznaj React

Czym jest React?Twój pierwszy komponentZasada jednego rodzicaJSX to nie HTMLPodsumowanie: poznaj React

4Props

Czym są propsy?Przekazywanie propsówDwa propsyTen sam komponent, nowe daneProp childrenPodsumowanie: propsy

7Warunki i listy

Renderowanie warunkowe operatorem trójargumentowymWyświetlanie za pomocą &&Renderowanie listyKlucze mają znaczenieFiltruj, a następnie mapujPodsumowanie: warunki i listy

2Wyrażenia JSX

Nawiasy klamroweDziałania matematyczne w nawiasach klamrowychNawiasy klamrowe w atrybutachWywoływanie funkcji w JSXPodsumowanie: wyrażenia JSX

5Stan i zdarzenia

Czym jest stan?Licznik kliknięćLiczenie krokamiPrzełączanie za pomocą stanuNiezależny stanPowtórka: stan i zdarzenia

8Projekt: Karta profilu

Krok 1: Struktura kartyKrok 2: Karta z propsKrok 3: Przycisk „Lubię to”Krok 4: Przełącznik obserwowania

3Komponenty

Elementy składoweTwój drugi komponentPonowne używanie komponentówTworzenie stronyPodsumowanie: komponenty

6Formularze i pola wejściowe

Kontrolowane pola wejścioweWyświetlanie wpisanego tekstuLicznik znakówPrzycisk czyszczeniaPodsumowanie: formularze i pola wejściowe