React Native: TextInput

0.62.2+

0:00To na ostatniej lekcji pokazaliśmy sobie jak dodać taką

0:04prostą interakcję z użytkownikiem poprzez poprzez taki button a

0:08teraz chcielibyśmy dodać coś więcej

0:12i na przykład użyć nie wiem żeby ten opis nam

0:16się tutaj zmieniał do tego będziemy nam potrzebny taki

0:20komponent jak TextInput TextInput

0:25on jest self-closing to znaczy że jakby on nie zawiera żadnych dzieci nie

0:30powinien zawierać żadnych dzieci i tak naprawdę tyle

0:34tylko jak zauważymy tu nic się nie wyświetli więc sobie go ostylujmy bo być może on tam już jest ale

0:38jest niewidoczny więc zróbmy sobie nazwijmy go DescriptionInput

0:42i to się równa styled TextInput

0:52niech on będzie na full szerokość niech ma wysokość na przykład 50 pixeli

0:57i żeby tam coś było widoczne to na przykład background color

1:03niech ma jakiś takich subtelnie ale tego na przykład

1:08aaa oj nie to cccccc

1:23a no oczywiście fajnie ale musimy go tutaj dodać

1:27dodajmy go no i coś tam jest fajnie coś tam możemy

1:31pisać jest iOS fajnie coś tam się dzieje jest android

1:35no spoko to teraz dodajmy sobie jakiś mały margines bo

1:39gdzieś to tak nachodzi strasznie na ten na ten nasz button upgrade'u margin-top

1:45na przykład dajmy 10 pixeli spoko jest

1:49jeszcze jedna rzecz którą warto by tutaj dodać załóżmy że jak nie mamy tekstu to tak

1:53naprawdę nie wiemy co to jest na szczęście TextInput zawiera

1:58taki fajny parametr który się nazywa placeholder który zapewne świetnie kojarzycie w którym możemy napisać

2:02co tu należy wpisać i na przykład New

2:06description można

2:10oczywiście zmieniać kolor tego description mamy do tego odpowiednie propsy no ale nie jest to jakieś kluczowe

2:15w tej chwili i jeszcze byśmy dodali sobie jakiś padding wewnątrz

2:19padding na przykład 8px żeby świetnie

2:25żeby to jakoś tam wychodziło no i spoko mamy nasz

2:30TextInput no i teraz może dodajmy jakiegoś buttona żeby po jego kliknięciu nam

2:35się ten tekst żebyśmy mogli coś robić żebyśmy w końcu doszli do tego żeby ten tekst się zmieniał więc

2:39zacznijmy od dodania buttonu który sobie ostylujemy tutaj tak naprawdę to będzie

2:43trochę podobny do tego więc sobie to skopiujmy tylko że zamiast

2:47upgrade to nazwiemy to sobie DescriptionButton

2:52i żeby to też nie było blue to

2:56nie wiem niech to będzie color red cokolwiek i możemy

3:02to sobie skopiować i wkleić tutaj

3:06przy czym znowu zamiast Upgrade to zrobimy sobie Description

3:12ButtonText tylko

3:17że jeszcze w tej chwili nie mamy żadnej obsługi tego więc to nam też

3:21nie będzie potrzebne wywalmy sobie to coś popsułem oraz znacznika nie ma coś

3:26dalej popsułem nie jest okej okej mamy jakiś tam description tylko

3:31może zmieńmy to na Add description okej

3:38fajnie aż

3:42taki margines nam tu nie będzie potrzebny dajmy na przykład 5 okej fajnie

3:51fajnie no

3:56dobra obsłużmy to teraz czyli musimy sobie dodać

4:01jakiś nasz state który będzie się nazywał description setDescription

4:06tak jak mówiłem na początku kursu ja zakładam że już podstawy

4:11Reacta i hooks'ów macie

4:15za sobą więc ja nie będę tłumaczyć za bardzo co tutaj robię aczkolwiek nie zamierzam też korzystać

4:20z jakichś zaawansowanych rzeczy więc mam nadzieję że nawet jak powiedzmy macie bardzo

4:24początkowe szczątkowe pojęcie na temat hooks'ów czy Reacta

4:28to dacie sobie radę początkowy opis niech będzie

4:32na przykład Something just

4:37Something okej i tutaj wsadźmy nasz Description

4:41czy to jest okej wygląda okej no

4:46i dodajmy naszą obsługę czyli piszemy sobie onDescription

4:51Change która

4:57będzie wywołana w tym momencie onDescriptionChange okej

5:04tylko teraz musimy po kliknięciu

5:08wiedzieć co mamy ustawić tak naprawdę czyli to co zostało tu wpisane no i jak to z tego wyciągać

5:13najlepiej zrobić sobie state który nazwiemy

5:17currentText setCurrentText

5:21który będzie początkowy i w naszym

5:26input'cie po prostu go ustawimy mam taki taki props jak value w którym

5:30możemy podać jaka ma być wartość tego inputa i mamy

5:34taki parametr taki props jak onText

5:39onChangeText która jest wywołana jakby przyjmuje funkcje

5:43i ta funkcja jest wywołana wtedy kiedy coś się w tym takście zmienia i możemy

5:47tutaj na przykład podać naszą metodę on nie przepraszam tutaj

5:51podajmy poprostu metodę żeby on ustawił nowy CurrentText okej no

5:58dobra no i zobaczmy co tutaj się ciekawego stanie wylogujmy sobie

6:02jaki jest CurrentText w momencie kliknięcia okej

6:08czyścimy sobie nasze logi pusty

6:19jak widać działa jest okej no dobra no to w takim wypadku tutaj musimy

6:23ustawić Description na

6:28nasz CurrentText i zeby to jakoś tam

6:32wyglądało to jeszcze możemy sobie nasz CurrentText ustawić jako pusty zobaczmy

6:38jak to wygląda a Description właściwie żeby

6:43być prawidłowo to tutaj powinniśmy nazwać to SetDescription okej

6:48Hello jest okej Hi

6:53Set description no dobra jakoś to jest

6:57jakoś to działa więc jeszcze

7:01sprawdźmy jest okej tylko zauważcie to działa tylko na kliknięcie

7:06tego buttona co jest w sumie spoko ale gdzieś tak intuicyjnie po wpisaniu tego

7:10chcielibyśmy żeby to działało też po kliknięciu na ten button na szczęście

7:14aż input zawiera takie propsy które nam to ułatwią i

7:18ten props się nazywa onSubmitEditing i on

7:22będzie wywołany wtedy kiedy właśnie klikniemy sobie na ten przycisk powiedzmy

7:26akcji zakończenia wpisu na klawiaturze i w tym

7:30momencie tak naprawdę chcielibyśmy

7:36wywołać to samo co po kliknięciu na button no i sprawdźmy czy to

7:40działa coś tam coś tam coś tam

7:44return jest okej fajnie popatrzmy

7:48na androidzie Hello i to jest fajne że na emulatorze możemy w symulatorze emulatorze możemy pisać

7:53zarówno tutaj przy użyciu tej klawiatury jak i przy użyciu naszej klawiatury w

7:57komputerze Hello Something

8:02okej działa więc generalnie mi się to podoba

8:06natomiast jest jeszcze jeden case który chciałbym wam powiedzmy poprawić czyli

8:10New description here

8:14zobaczcie że po ustawieniu po kliknięciu przycisku

8:18Set description dalej ta klawiatura której nie ma jak wybierzemy tą opcję

8:22z klawiatury do zakończenia wpisywania no i wydaje mi

8:26że tak powiedzmy mimo że ten projekt nie jest jakoś fantastycznie OS X-owy to jednak fajnie by było jakby

8:31no jakby ta klawiatura też się chowała no i taką najłatwiejszą

8:35metodą jest zaimportowanie sobie moduł Keyboard w

8:39momencie kiedy ustawiamy nasz nowy tekst wywołanie

8:44sobie metody Keyboard.dismiss i

8:49patrzę co się tutaj dzieje ustawiamy sobie very

8:53interesting something oj tutaj

8:57mój słownik języka polskiego to zamienił i ustawiamy

9:02sobie sobie Set description i fajnie klawiatura nam się chowa sprawdźmy czy to tak samo działa na androidzie

9:06something here super

9:10czyli zrobiliśmy jakiś podstawowy input tekstowy

9:14który powiedzmy że nawet fajnie działa bo możemy sobie też zarówno wpisywać w ten

9:18sposób jaki wykorzystując nasz button no i to tyle jeśli chodzi o tą lekcję

9:22z podstawowymi inputami