Samodzielna ocenaPodstawowa

Wyszukiwanie przyciskiem

Zbuduj komponent, który filtruje listę ['React', 'Node', 'JavaScript'] dopiero po kliknięciu przycisku „Szukaj” (wysłaniu formularza), a nie po każdym wpisanym znaku.

Komponentów React nie da się tu uruchomić automatycznie. Napisz rozwiązanie w edytorze, sprawdź je we własnym projekcie i porównaj z listą kontrolną.

Przećwiczysz

Oddzielić wpisywany tekst od zatwierdzonego zapytania
Obsłużyć formularz w React

Powiązane pytania

Źródło: Full Stack / JS — karta z zadaniem — Polecenie i rozwiązanie wzorcowe pochodzą z karty.

Nie jest uruchamiany automatycznie — porównaj z listą kontrolną

import { useState } from 'react';
const items = ['React', 'Node', 'JavaScript'];

export default function Search() {
  // Twoje rozwiązanie
}

Tab wcina · Esc, a potem Tab, opuszcza edytor · Twój kod jest zapisywany w tej przeglądarce.

Wpisywany tekst i zatwierdzone zapytanie są osobnymi stanami
Filtr zmienia się dopiero po wysłaniu formularza
Wysłanie formularza nie przeładowuje strony (preventDefault)
Pole ma etykietę
Pusta lista wyników pokazuje komunikat

Zaznaczone: 0 z 5

Podpowiedzi

Utknąłeś? Podpowiedzi idą od ogólnych do konkretnych.

Rozwiązanie wzorcowe

Najpierw spróbuj naprawdę — rozwiązanie najwięcej daje, gdy już trochę się namęczysz.