Licznik znaków
Część sekcji Podstawy ścieżki React w Coddy. Lekcja 30 z 42.
Ponieważ tekst jest stanem, możesz wykonywać na nim obliczenia przy każdym renderowaniu. Liczniki długości w stylu Twittera to jedna linijka:
<p>{message.length} characters</p>Nie potrzeba dodatkowego stanu: message.length wynika z istniejącego stanu i jest automatycznie przeliczana przy każdym naciśnięciu klawisza. Zasada praktyczna: jeśli możesz obliczyć daną wartość na podstawie stanu, który już masz, nie przechowuj jej w stanie.
Wyzwanie
ŁatwyUtwórz pole bio z licznikiem długości aktualizowanym na bieżąco.
- Ustaw pole wejściowe (
id="bio") jako kontrolowane za pomocą stanubio(zacznij od pustej wartości). - Akapit (
id="length") wyświetlaN characters, gdzie N to bieżąca długość bio (obliczana, a nie przechowywana).
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>
Sprawdź sięTa lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.
Wszystkie lekcje w sekcji Podstawy
1Poznaj React
Czym jest React?Twój pierwszy komponentZasada jednego rodzicaJSX to nie HTMLPodsumowanie: poznaj React