React: Dodawanie nowego elementu listy

0:00Cześć! W poprzedniej lekcji stworzyliśmy taki prosty formularz, który logował

0:04nam rzeczy, które wpisywaliśmy do niego, do naszej konsoli. Teraz

0:08przejdziemy do dodawania prawdziwych elementów do naszej listy - właśnie za pomocą

0:12tego formularza. Jak widzisz, on się dość mocno zmienił. Dodałem do niego odpowiednie style,

0:17żeby po prostu dobrze wyglądał, nie wpływa to za bardzo na to jak aplikacja działa, ale

0:21na pewno wpływa na to jak wygląda. Dlatego nie zajmowaliśmy się tym w żadnej

0:25osobnej lekcji. Możesz, fragment kodu odpowiedzialny za jego wygląd, skopiować ze

0:30specjalnego gista czy też dżista, który przygotowałem do tej lekcji. Dla krótkiego

0:34przypomnienie, jak działa nasz formularz, w naszym pliku App.js podajemy

0:38funkcję, która przechwytuje event, dostaje go

0:42w tym miejscu jako parametr. Następnie tę funkcję podajemy jako props'a do

0:46naszego form, czyli komponentu, które widzimy w tym miejscu. Podajemy

0:51go jako props'a submitFn, czyli submit function. Następnie

0:57destrukturyzujemy nasze submit function, w tym miejscu, czyli wyciągamy go, żeby

1:01nie pisać po prostu props kropka submit function - możemy wpisać wtedy po

1:05prostu submitFn, ponieważ to jest zdestruturyzowany prop. I mówimy

1:09naszemu formularzowi, że za każdym kiedy zostanie on zasubmitowany, to ma właśnie

1:14wykonać tę funkcję. Podajemy tylko nazwę funkcji i ten parametr event,

1:18który podawaliśmy w App.js. Jest wtedy przekazywany automatycznie, a wraz z

1:22nim wszystkie informacje, dotyczące pól znajdujących się w naszym

1:26formularzu. W tym przypadku mamy cztery pola, więc mamy tablice

1:30z czterema elementami. Pamiętamy, że pierwszy to jest zawsze zero. Jeśli

1:35wpiszemy cokolwiek w naszym formularzu, to

1:45odpowiednie wartości zostaną przekazane do tej funkcji. To tak gwoli przypomnienia,

1:49więc teraz przechodzimy do dodawania naszego elementu. Do

1:53state'u i zarazem do naszej listy. Pierwsze, co musimy zrobić to

1:57zerknąć na nasze elementy z inicjalnego state'u. Mamy

2:01oczywiście tutaj w tym const'cie initialStateItems i tak

2:05naprawdę, możemy sobie jeden po prostu skopiować, żeby odzwierciedlić jego strukturę -

2:10stworzymy sobie teraz const'a. Może

2:14tego nie usuniemy na razie. Const newItem. Będzie

2:20to obiekt zawierający wszystkie te cztery

2:24klucze. Dan Abramov akurat nie ma description, ponieważ usuwaliśmy, żeby pokazać

2:28jak działa defaultProps, więc po prostu dodamy description

2:32sami. W tym miejscu, wszystkie

2:39te elementy możemy usunąć. Potrzebujemy tylko kluczy. Teraz

2:47tylko musimy zachować odpowiednią kolejność naszych elementów, więc mam najpierw name,

2:51później mamy twój ten link później image, później description. Następnie

2:58podmienimy te cztery wartości na

3:03te elementy, które logowaliśmy tutaj. W ten

3:17sposób stworzyliśmy nowy obiekt, który za chwilkę będziemy dodawać do naszego

3:21state'u. Najłatwiej możemy zrobić poprzez użycie funkcji setState, w której

3:29powiemy, że items, od teraz to this.state.items. Z

3:34dodanym new item. Musimy

3:41użyć tutaj spread operator'a wskazać, że mamy też jakieś starsze

3:46elementy w naszej liście, żeby one nie zostały usunięte. W momencie, kiedy by tego było,

3:50to nasz state zostałby zastąpiony tylko jednym elementem - tym

3:54nowym, który podajemy. Zdecydowanie jest to najbardziej intuicyjny

3:58sposób. Jednak jest lepszy, sugerowany też przez dokumentację React'a,

4:03który używa funkcji prevState, która

4:09dopiero podaje poprzedni stan, w tym

4:14miejscu. Zabezpiecza

4:23nas to przed błędami wynikającymi z dynamicznego zmieniania naszego stanu, dzięki

4:28temu React ma po prostu dostęp do ostatniej wersji naszego state'u, z której

4:32pobiera sobie items i dzięki temu jesteśmy pewni, że to items w tym

4:36miejscu, będzie tym starym items, a nie items, które na przykład utworzyło się zaraz

4:40po tym dodaliśmy new item. Tego typu błędy, dzięki funkcji

4:44prevSatet i po prostu się nie pojawią w naszym kodzie, a teraz sprawdźmy, czy

4:48na pewno to działa. Wybierzmy sobie tylko jakiś obrazek, może

4:54to być na przykład avatar Dan'a Abramov'a. Musimy skopiować jego

4:58link, żeby móc go dodać w tym miejscu. Powiedzmy,

5:04że to będzie właśnie New Dan, image...

5:09zróbmy tego Twittera,

5:13faktycznie, kierującego do Dan'a Abramov'a. Dajmy

5:20cokolwiek i nasz nowy element

5:24pojawił się tym miejscu. Mamy zarówno obrazek, jak i tytuł, jak i

5:29opis i link, który działa. Więc wszystko jest

5:33tak jak zaplanowaliśmy. Dwie rzeczy, które jeszcze tak na szybko możemy usprawnić, to to,

5:37żeby resetować za każdym razem form, kiedy submit'ujemy nasze zmiany. Możemy to

5:42zrobić przy wykorzystaniu funkcji reset, która jest prostu wpięta do

5:47naszego form'a. Spróbujmy czy to zadziała. Wybierzmy

5:52te same dane. Tak i nasz form się

5:56ładnie resetuje. Nie jest to żadna React'owa rzecz, jest to zwykła rzecz

6:00wpięta w HTML form, po prostu dzięki funkcji reset,

6:04możemy wyczyścić nasze pola. A drugą rzeczą jest to, że

6:08kiedy jesteśmy w naszym ListItem, to

6:13fajnie, żeby link odpalał się w nowej karcie, bo teraz wszystko mamy

6:17w jednej karcie. Możemy to zrobić poprzez dodanie tag'a target, blank

6:25i teraz nasze elementy odpalają się

6:29w nowej karcie. Świetnie, to tyle w tej lekcji. Dodaliśmy

6:34nowe rzeczy do naszego stanu. Mamy jeszcze kilka rzeczy, które fajnie

6:38będzie usprawnić w naszej aplikacji, ale o tym już w następnych lekcjach.