Nowoczesny React: Kontrola wartości w input

0:00Czas uruchomić nasz formularz, który dodaliśmy w zadaniu wcześniej.

0:04Chcemy tutaj dodawać nowe osoby tak, żeby pojawiały się tutaj na liście People.

0:08Mamy to w osobnym panelu.

0:10Mamy to w osobnej stronie, a new Person chcemy tutaj sobie dodać i po kliknięciu

0:14na Add mamy już zablokowany on submit, ale chcielibyśmy odczytać dane w inpucie,

0:20czyli tego name'a, który wpisujemy i w jakiś sposób wysłać zaktualizować.

0:25Do tej pory odczytywaliśmy wartość inputa, ale to było tylko w zadaniu i to było

0:29tutaj w onChange właśnie w Searchboxie.

0:33Spróbujmy pożyczyć sobie ten kawałek kodu, czyli tutaj w tym inpucie chcemy sobie

0:38zrobić właśnie onChange, ale chcielibyśmy, żeby w naszym stanie

0:44danych był person name.

0:45Czyli zobacz, tutaj będziemy chcieli to ograć UseState em, żeby nasz stan danych

0:51zmieniał się w czasie i personname razem z setPerson name to będą te elementy, które

0:56pozwolą nam na aktualizację tego stanu i odczytanie person name.

1:01I tutaj przy Event Target value mamy informację zwrotną, że coś zostało

1:07zaktualizowane, a z kolei tutaj w value chcemy aktualizować to person name.

1:13Robimy z inputa tzw.

1:14control komponent, w którym będzie można aktualizować rzeczy, ale musimy

1:20zainicjować to z jakąś wartością.

1:22Czyli gdyby wartość początkowa to była.

1:23Michał, to zauważ, że jest to tutaj w tej naszej kontrolce,

1:28czyli value zostaje zaktualizowane na podstawie stanu.

1:30Z kolei jeśli my aktualizujemy ten stan i zrobimy na przykład Kasię, no to jak gdyby

1:36jest to aktualizowane, widzimy, że działa.

1:39Ustalamy sobie początkową wartość jako pusty string i tutaj wyodrębmy

1:44sobie funkcję handle submit.

1:46Gdybyśmy zrobili funkcję Handle Submit set Person name możemy sobie wyzerować

1:50w momencie, gdy ją wyślemy.

1:52Natomiast tutaj to event PreventDefault wyglądałoby teraz następująco.

1:57Tutaj będzie event.

1:58I weźmy sobie event PreventDefault.

2:01Zróbmy to sobie dla przykładu w ten sposób i handlesubmit podmieniamy sobie tutaj na

2:07referencję właśnie do tej funkcji, którą tutaj mamy.

2:10I teraz jeżeli personname robimy sobie podstawową jakąś walidację, jeżeli

2:16personnamelength jest większe od zera, czyli albo można sobie

2:21zrobić jeszcze inaczej.

2:22Jeżeli personname po prostu jest uzupełnione, bo jest to falsy value.

2:26Jeżeli jest to pusty string, no to wtedy zróbmy sobie return.

2:30Czyli nie chcemy robić nic dalej.

2:32Natomiast jeżeli wszystko jest w porządku to chcemy wyzerować tą

2:34wartość, czyli zobacz dodajemy.

2:36Widzimy, że to działa.

2:38Można to zrobić również z enterem dlatego, że jesteśmy w środku formularza i mamy

2:42button, który ma typ submit, więc enter też zadziała jeżeli tutaj

2:46wpiszemy sobie Kasia Enter.

2:48Zauważ, że to działa i na tym przykładzie chcielibyśmy sobie na podstawie tego

2:53imienia zaktualizować listę naszych osób.

2:58Moglibyśmy sobie naiwnie do tego podejść w ten sposób, że jeżeli mamy tutaj coś

3:03takiego jak PIP u, to moglibyśmy wyeksportować sobie funkcję ad person i na

3:09podstawie Neyma aktualizujemy people jako push i tutaj name I to

3:14powinno nam zadziałać.

3:16I paradoksalnie tutaj naiwnie nie znaczy źle.

3:19Naiwnie nie znaczy najgorzej.

3:21No i nie znaczy, że to podejście nam nie zadziała.

3:25Zaraz zauważysz, że jeżeli tutaj dopiszemy sobie add person i tutaj będzie person

3:29name, czyli mamy to ad person z people JS tak?

3:33Zaimportowane.

3:34No to jeżeli tutaj dopisze sobie Monika i uderzy Enter, a później Mariusz, no to

3:41wtedy w People będę miał te dwa imiona i one będą cały czas

3:46działały z naszą logiką.

3:47Dzieje się tak dlatego, ponieważ w momencie, gdy dodaje to nowe imię, zauważ,

3:52że ja nie muszę jak gdyby aktualizować widoku.

3:55Gdybym musiał zrobić jakiś update na widoku, to wtedy to nie zadziała.

3:59To tak nie zadziała, dlatego, że aktualizujemy po prostu referencję do

4:04zwykłej tablicy ze zwykłymi stringami.

4:06Robimy zwykłego pusza.

4:07React nie ma możliwości wiedzieć, że ma zaktualizować stan.

4:11Żeby to było, musielibyśmy mieć tutaj usestate gdzieś.

4:15No i właśnie to daje Ci do myślenia, że gdybyśmy chcieli to rozwiązać w ten

4:20sposób, że jakakolwiek aktualizacja, dodanie właśnie do tablicy People dwóch

4:25nowych imion miałaby aktualizować na widoku natychmiast coś, to musielibyśmy

4:30sobie zrobić własnego, dedykowanego hooka.

4:33Tak by było najprościej.

4:34Czyli swoim własnym hukiem juz People na przykład ogralibyśmy temat tego, że możemy

4:41w trakcie działania aplikacji dodać coś i liczymy na to, że React będzie

4:45wiedział, że ma zaktualizować stan.

4:48Wtedy takim customowym hukiem moglibyśmy sobie poradzić.

4:51Natomiast tutaj dołóżmy jeszcze jedną funkcjonalność.

4:54Załóżmy, że chcemy, żeby styl i opacity tego buttona było zależne od tego,

5:01czy personname jest podany czy nie.

5:03Jeśli personname jest podany to opacity jest 1.

5:06Jeśli nie, to jest na przykład 0.6. I to jest ciekawa funkcjonalność, dlatego, że.

5:12Zauważ, że z punktu widzenia accessibility nie chce zabrać klikalności tego buttona.

5:17Chce, żeby on był klikalny.

5:19Czyli chciałbym, żeby tutaj wpisując sobie jakieś imię, wtedy to się podświetliło,

5:23ale niezależnie od tego, czy wpisałem, czy nie dało się kliknąć w

5:26button, on się tutaj waliduje.

5:29Nie mamy co prawda informacji zwrotnej na temat walidacji, ale do tego

5:33przejdziemy sobie w następnej lekcji.

5:35Natomiast tutaj widzimy, że zmieniam tylko opacity, zmieniam tylko graficznie, daję

5:40informację, że jeszcze coś potrzeba, żeby aktywować ten button, żeby

5:45on faktycznie nam zadziałał.

5:46Natomiast nie stosuję do tego Disable, wręcz przeciwnie, robię to jako style

5:52opacity, żeby button był dalej klikalny.