Przycisk czyszczenia
Część sekcji Podstawy ścieżki React w Coddy. Lekcja 31 z 42.
Oto supermoc kontrolowanego pola wejściowego: ponieważ tekst jest przechowywany w stanie, Twój kod może zmieniać zawartość pola, a nie tylko użytkownik. Zresetuj ją z dowolnego miejsca:
<button onClick={() => setName('')}>Clear</button>Ustaw stan na pusty ciąg znaków, a pole opróżni się przy następnym renderowaniu, ponieważ value={name} zawsze wyświetla stan. Przy niekontrolowanym polu trzeba byłoby ręcznie sięgać do DOM; w przypadku stanu wystarczy jedno wywołanie funkcji ustawiającej.
Wyzwanie
ŚredniDokończ tworzenie wiadomości.
- Powiąż pole wejściowe (
id="message") ze stanemmessage. - Wyświetl wersję roboczą w akapicie (
id="draft"): tekstDraft:, a po nim wiadomość. - Przycisk
id="clear"opróżnia pole wiadomości.
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 React2Wyrażenia JSX
Nawiasy klamroweDziałania matematyczne w nawiasach klamrowychNawiasy klamrowe w atrybutachWywoływanie funkcji w JSXPodsumowanie: wyrażenia JSX3Komponenty
Elementy składoweTwój drugi komponentPonowne używanie komponentówTworzenie stronyPodsumowanie: komponenty6Formularze i pola wejściowe
Kontrolowane pola wejścioweWyświetlanie wpisanego tekstuLicznik znakówPrzycisk czyszczeniaPodsumowanie: formularze i pola wejściowe