1
00:00:02,390 --> 00:00:05,610
Jadi, selangkah demi selangkah kami membuat kemajuan, yang tidak

2
00:00:05,660 --> 00:00:08,150
dapat kami lakukan adalah memasukkan angka.

3
00:00:08,150 --> 00:00:14,090
Yah saya kira secara teknis kita bisa memasukkan angka jika kita menemukan bidang input, ini dia tapi tidak terlalu

4
00:00:14,090 --> 00:00:17,920
menyenangkan untuk mencarinya, akan lebih baik jika Anda bisa melihatnya, bukan?

5
00:00:18,680 --> 00:00:22,270
Jadi karena itu mari kita gayakan bidang input

6
00:00:22,280 --> 00:00:30,470
itu, bidang input teks di sini sedikit dan sama seperti sebelumnya sebenarnya, saya pergi untuk melakukannya dalam komponen yang

7
00:00:30,470 --> 00:00:31,260
terpisah.

8
00:00:31,310 --> 00:00:40,520
Jadi di folder komponen, saya akan menambahkan input saya sendiri. File js dan di sana, seperti biasa mengimpor Bereaksi dari Bereaksi dan

9
00:00:40,520 --> 00:00:46,580
kemudian impor input teks dari Bereaksi Asli dan di sini saya sebenarnya tidak memerlukan tampilan karena

10
00:00:46,580 --> 00:00:51,970
kita hanya akan memiliki input teks di sini dalam gaya dan dikonfigurasi di sana dan

11
00:00:51,970 --> 00:00:59,880
kemudian memiliki konstanta input di sini yang merupakan komponen fungsional kami, yang pada akhirnya kami juga ekspor tentu saja dan satu hal

12
00:00:59,880 --> 00:01:01,980
yang pasti kami perlukan adalah

13
00:01:02,280 --> 00:01:08,550
stylesheet karena yang sekarang harus ditata di sini sehingga kami memiliki satu tampilan input default yang dapat

14
00:01:08,550 --> 00:01:13,710
digunakan kembali dalam aplikasi jika kami membutuhkan banyak input di tempat yang berbeda dan

15
00:01:13,710 --> 00:01:15,120
itu benar-benar pola

16
00:01:15,120 --> 00:01:20,130
pikir yang harus Anda masuki, membuat komponen yang dapat digunakan kembali sehingga Anda

17
00:01:20,130 --> 00:01:26,460
tidak perlu menyalin kode di sekitar atau mengulang sendiri tetapi Anda dapat dengan mudah berbagi komponen Anda

18
00:01:26,460 --> 00:01:32,700
dan dengan mudah membuat aplikasi Anda inginkan dari set blok bangunan yang Anda buat sendiri pada akhirnya.

19
00:01:32,700 --> 00:01:41,650
Jadi di sini, objek gaya saya dengan Stylesheet. buat, seperti itu, terlihat bagus dan sekarang di komponen itu,

20
00:01:41,710 --> 00:01:44,230
saya ingin mengembalikan input

21
00:01:44,230 --> 00:01:46,990
teks, jadi ini input teks bawaan.

22
00:01:46,990 --> 00:01:49,830
Sekarang tentu saja, ide saya adalah bahwa kita

23
00:01:49,870 --> 00:01:58,180
dapat mendesainnya dari sini, jadi mari kita menetapkan gaya dari sana tetapi seperti halnya dengan kartu, akan lebih baik jika kita juga dapat mengatur beberapa

24
00:01:58,180 --> 00:02:05,200
gaya dari luar, seperti lebar khusus atau perbatasan khusus, semacam itu. Untuk mengaktifkannya, sekali lagi saya akan meneruskan objek

25
00:02:05,380 --> 00:02:08,050
di sini ke gaya dan

26
00:02:08,050 --> 00:02:14,470
untuk satu mengambil semua gaya saya diatur dalam objek gaya saya dan di sana katakanlah

27
00:02:14,470 --> 00:02:23,970
di properti input yang belum kita tambahkan dan di samping itu, juga tambahkan semua gaya kita dapatkan dari gaya alat peraga sehingga kita

28
00:02:23,970 --> 00:02:30,060
dapat mengatur gaya dari luar juga dan sekarang di sana di stylesheet, kita dapat

29
00:02:30,060 --> 00:02:37,180
menambahkan gaya input untuk menetapkan beberapa gaya ke input. Jadi di sini, kita dapat memberikan ini tinggi katakanlah 30

30
00:02:37,180 --> 00:02:43,420
yang seharusnya merupakan ketinggian yang terlihat relatif baik dan untuk melihat sesuatu, saya juga ingin menambahkan batas di bagian bawah.

31
00:02:43,450 --> 00:02:49,120
Anda juga dapat menambahkan perbatasan di sekitar seluruh input dengan warna tepi dan lebar tepi dan sebagainya, tetapi

32
00:02:49,310 --> 00:02:54,970
saya suka tampilan di mana kami hanya memiliki perbatasan di bawah input, tetapi itu tentu saja benar-benar subjektif

33
00:02:55,060 --> 00:02:59,120
dan sesuatu yang dapat Anda atur sesuai dengan preferensi pribadi Anda. .

34
00:02:59,250 --> 00:03:06,160
Batas di bagian bawah hanya dapat diatur dengan warna batas bawah dan di sana saya akan

35
00:03:06,160 --> 00:03:16,110
pergi dengan abu-abu, warna pra-dibangun lain yang dapat kita gunakan dengan cara pintas itu dan memberikan batas bawah ini juga lebar di sini,

36
00:03:16,110 --> 00:03:22,680
tambahkan margin vertikal dari 10 untuk memiliki jarak di sekitar input, setidaknya ke atas dan

37
00:03:22,890 --> 00:03:26,380
bawah dan sekarang dengan itu, penataan dasar untuk

38
00:03:26,400 --> 00:03:28,170
input teks ini

39
00:03:28,170 --> 00:03:36,660
selesai, sekarang mari kita gunakan itu di layar permainan. Jadi di sana, saya ingin mengimpor input saya sendiri dari input

40
00:03:36,660 --> 00:03:39,890
folder komponen, seperti itu dan mengganti input teks ini

41
00:03:40,930 --> 00:03:46,690
di sini dengan input saya sendiri yang pada akhirnya membungkus input teks bawaan ini tentu

42
00:03:46,690 --> 00:03:47,440
saja.

43
00:03:47,500 --> 00:03:48,510
Jadi gunakan

44
00:03:48,510 --> 00:03:52,300
input saya sendiri, singkirkan input input teks di sana yang tidak kita

45
00:03:52,600 --> 00:03:59,370
perlukan lagi dan sekarang jika kita menyimpan ini, kita melihatnya sedikit tetapi sangat kecil, Anda hampir tidak dapat melihatnya di sini

46
00:03:59,410 --> 00:04:04,600
di iOS dan itu semakin besar saat Anda mengetik yang tentu saja bukan yang kami inginkan.

47
00:04:04,900 --> 00:04:06,590
Kita tentu saja tidak selesai,

48
00:04:07,200 --> 00:04:09,290
alih-alih mengatur gaya lebarnya, saya akan

49
00:04:09,300 --> 00:04:10,950
pergi ke layar mulai permainan,

50
00:04:10,980 --> 00:04:14,460
jadi ke tempat di mana kita menggunakan input dan mengatur styling

51
00:04:14,460 --> 00:04:19,200
di sini karena bagi saya masuk akal bahwa kita memiliki beberapa general gaya yang selalu

52
00:04:19,380 --> 00:04:24,720
kita inginkan dalam komponen input, sesuatu seperti ketinggian atau batas tetapi beberapa gaya tertentu, seperti seberapa besar

53
00:04:24,720 --> 00:04:25,230
seharusnya,

54
00:04:25,350 --> 00:04:28,480
jadi seberapa luas seharusnya, itu adalah sesuatu yang ingin Anda

55
00:04:28,650 --> 00:04:36,150
atur di tempat di mana Anda benar-benar menggunakan dan karenanya di sini, saya akan menambahkan properti input ini di objek stylesheet layar mulai permainan

56
00:04:36,150 --> 00:04:42,360
dan mungkin menggunakan lebar 50 piksel di sini, yang seharusnya terlihat bagus dan menetapkannya ke input khusus saya di sini

57
00:04:42,450 --> 00:04:43,760
dengan gaya prop.

58
00:04:43,830 --> 00:04:51,840
Jadi di sana, kita sekarang bisa menunjuk ke gaya. input dan dengan itu, ia akan memiliki lebar itu setiap saat dan

59
00:04:51,840 --> 00:04:55,380
jika kita mengetik di sana, kita tidak membuat itu

60
00:04:55,380 --> 00:05:00,040
lebih luas lagi, alih-alih kita dapat dengan mudah gulir secara otomatis pada input itu.

61
00:05:00,150 --> 00:05:05,760
Sekarang untuk input spesifik ini, untuk tata letak spesifik ini di sini, akan lebih baik jika teksnya

62
00:05:05,760 --> 00:05:06,500
akan

63
00:05:06,600 --> 00:05:12,330
dipusatkan, saya pikir, untuk sebagian besar input Anda ingin perilaku penulisan default dari kiri ke kanan dan

64
00:05:12,330 --> 00:05:13,220
mulai dari tepi

65
00:05:13,260 --> 00:05:20,480
kiri tetapi di sini saya pikir beberapa teks terpusat akan lebih baik dan oleh karena itu di layar permulaan permainan di mana

66
00:05:20,480 --> 00:05:23,550
saya ingin memiliki pemusatan ini di sini, pada input

67
00:05:23,660 --> 00:05:30,470
ini, kita juga dapat menambahkan properti pelurusan teks dan mengatur ini ke pusat dan sekarang ini akan memusatkan teks ini di

68
00:05:30,470 --> 00:05:32,330
sini di tengah sebagai kami

69
00:05:32,330 --> 00:05:35,830
mengetik dan itu sangat bagus untuk hanya memasukkan angka, seperti ini.

70
00:05:36,920 --> 00:05:40,260
Omong-omong, saat ini kita dapat memasukkan apa pun

71
00:05:40,550 --> 00:05:45,980
di sana, jadi kita tentu perlu mengkonfigurasi input ini dan untuk itu jika saya pergi

72
00:05:45,980 --> 00:05:52,250
ke komponen input di mana kita menggunakan input teks, ada banyak hal yang dapat kita konfigurasi di sana

73
00:05:52,250 --> 00:05:59,030
dan sebenarnya sumber daya terbaik selalu tentu saja dokumentasi resmi. Di sana di API API, jika Anda pergi ke sana dan

74
00:05:59,030 --> 00:06:05,990
Anda mencari input teks, Anda akan menemukan tidak hanya penjelasan tetapi Anda juga akan menemukan semua alat peraga yang dapat Anda atur di

75
00:06:06,320 --> 00:06:09,230
sana dan Anda dapat mengatur hal-hal seperti itu multiline atau

76
00:06:09,230 --> 00:06:11,100
tidak , berapa lama teksnya.

77
00:06:11,330 --> 00:06:13,730
Anda juga dapat mengatur teks

78
00:06:13,730 --> 00:06:18,700
placeholder, Anda dapat mengatur koreksi otomatis dan semua hal yang menyenangkan, jadi

79
00:06:18,770 --> 00:06:25,670
pastikan untuk memeriksa dokumen ini untuk menemukan properti spesifik yang mungkin Anda perlukan untuk use case Anda.

80
00:06:25,730 --> 00:06:31,970
Saya ingin dapat mengatur alat peraga ini tetapi saya ingin dapat mengaturnya dari tempat

81
00:06:31,970 --> 00:06:37,640
saya menggunakan input khusus saya. Jadi bukan dari sini karena itu akan memastikan bahwa kita

82
00:06:37,730 --> 00:06:40,150
menggunakan konfigurasi yang sama untuk semua input

83
00:06:40,430 --> 00:06:46,550
yang mungkin kita miliki di aplikasi kita, saya ingin memiliki lebih banyak fleksibilitas dan hanya mengatur beberapa styling dasar di sini

84
00:06:46,550 --> 00:06:51,440
dan mengkonfigurasi input di tempat di mana kita kemudian gunakan itu bukan dalam komponen bungkus inti.

85
00:06:51,440 --> 00:06:57,140
Yang keren adalah Bereaksi dan itu bukan Bereaksi Asli, itu hanya Bereaksi di Javascript normal memiliki sintaks

86
00:06:57,140 --> 00:06:58,200
untuk itu.

87
00:06:58,460 --> 00:07:05,920
Anda dapat mengambil alat peraga yang Anda dapatkan dan menyebarkannya pada komponen Anda seperti ini.

88
00:07:05,920 --> 00:07:11,110
Sintaksnya mungkin terlihat sedikit aneh tetapi pada akhirnya yang dilakukan adalah mengambil semua

89
00:07:11,140 --> 00:07:19,120
properti yang Anda miliki, semua properti yang Anda atur di sini dan pada dasarnya menambahkannya ke komponen Anda sebagai properti.

90
00:07:19,150 --> 00:07:23,600
Sekarang jika Anda kemudian mendefinisikan alat peraga lain seperti gaya dan Anda sudah punya gaya di

91
00:07:23,650 --> 00:07:26,020
sini, gaya ini akan menimpa gaya yang Anda

92
00:07:26,040 --> 00:07:31,210
punya di sini dan itu sebenarnya yang saya inginkan karena jika saya menetapkan alat peraga gaya pada masukan

93
00:07:31,210 --> 00:07:37,450
saya sendiri dari luar, saya pasti ingin menimpa ini dengan gaya prop ini dan menambahkan gaya ini yang diatur di sana untuk

94
00:07:37,450 --> 00:07:38,200
input teks

95
00:07:38,200 --> 00:07:43,630
ini tetapi jika Anda mengatur properti lain di luar komponen ini, maka pada komponen kustom saya, maka mereka akan

96
00:07:43,630 --> 00:07:49,010
ditambahkan ke input teks dan memungkinkan kita untuk menambahkan semua alat peraga yang dapat kita tambahkan pada input teks

97
00:07:49,120 --> 00:07:52,120
juga pada input kita, begitu juga pada komponen kita sendiri.

98
00:07:52,120 --> 00:08:03,400
Jadi di sini di mana kita menggunakan input, kita sekarang tidak hanya dapat menambahkan gaya tetapi kita juga dapat menambahkan blurOnSubmit misalnya

99
00:08:03,400 --> 00:08:09,670
untuk memastikan bahwa ketika kita menekan tombol kirim di sana, kita kehilangan

100
00:08:09,670 --> 00:08:16,430
fokus dan kita menutup keyboard lunak. Kami dapat mengatur secara otomatis untuk tidak ada yang merupakan salah satu nilai yang

101
00:08:16,480 --> 00:08:20,040
diizinkan di sana jika Anda memeriksa dokumen. Anda dapat mengaturnya agar tidak ada, kalimat,

102
00:08:20,050 --> 00:08:24,610
kata-kata dan sebagainya, jadi saya tidak ingin kapitalisasi dihidupkan di sini karena kami hanya akan memasukkan angka tetapi juga

103
00:08:24,610 --> 00:08:30,610
karena saya ingin menunjukkan kepada Anda berbagai konfigurasi yang dapat Anda atur. Saya akan mengatur koreksi otomatis di sini ke

104
00:08:30,610 --> 00:08:35,050
false sehingga kami tidak mengoreksi input pengguna secara otomatis dan sangat penting

105
00:08:35,080 --> 00:08:41,000
di sini, saya akan mengatur jenis keyboard menjadi numerik, sehingga pengguna harus memasukkan nomor di sini.

106
00:08:41,320 --> 00:08:47,590
Saya akan mengatur panjang maks di sini menjadi 2 sehingga Anda hanya dapat memasukkan dua digit dan bukan angka yang sangat panjang

107
00:08:47,620 --> 00:08:53,890
karena game ini di sini dan itu hanya salah satu batasan yang saya miliki di sini, adalah bahwa game ini hanya

108
00:08:53,890 --> 00:08:57,140
bekerja dengan dua digit jumlah. Dengan semua itu diatur, sekarang

109
00:08:57,140 --> 00:09:02,990
jika kita kembali dan saya beralih keyboard lunak saya, Anda melihat Anda mendapatkan nomor keyboard di sini dan Anda

110
00:09:02,990 --> 00:09:09,180
hanya dapat memasukkan dua digit di sana dan tidak lebih dari itu, yang tentu saja persis apa yang saya inginkan.

111
00:09:09,260 --> 00:09:14,170
Selain itu, di sini di Android kita melihat ini, jika Anda mengklik tombol

112
00:09:14,180 --> 00:09:21,140
konfirmasi, ini akan menutupnya, itu berkat hal blurOnSubmit. Di iOS, tombol seperti itu tidak ada di sini, jadi di sana,

113
00:09:21,140 --> 00:09:25,730
kita harus mencari solusi berbeda untuk menutup ini jika Anda mengetuk di tempat lain misalnya karena saat

114
00:09:25,760 --> 00:09:27,150
ini, itu tidak terjadi.

115
00:09:27,320 --> 00:09:32,090
Tetapi hal baiknya adalah kita sekarang memiliki keyboard yang bisa kita lihat dan keyboard tempat kita bisa memasukkan angka.

116
00:09:32,090 --> 00:09:37,910
Satu hal yang ingin saya ubah adalah saat ini, saya juga dapat memasukkan pemisah desimal di sini.

117
00:09:37,910 --> 00:09:44,420
Sekarang untuk menghilangkan itu, Anda dapat mengubah jenis keyboard ke papan nomor dan untuk melihat semua jenis keyboard yang tersedia, seperti biasa dokumen

118
00:09:44,420 --> 00:09:49,650
resmi adalah tempat untuk pergi, di sana untuk input teks, Anda dapat menyelam ke dalam jenis keyboard dan

119
00:09:49,650 --> 00:09:54,650
menemukan tentukan apa yang dapat Anda atur, apa yang berfungsi pada semua platform dan apa yang dapat

120
00:09:54,650 --> 00:09:59,480
Anda atur jika Anda ingin memeriksa yang memeriksa platform mana yang Anda jalankan kode yang belum kita

121
00:09:59,480 --> 00:09:59,990
pelajari.

122
00:10:00,230 --> 00:10:03,200
Panel angka didukung di kedua platform dan jika Anda mengatur

123
00:10:03,350 --> 00:10:08,380
ini, Anda sekarang memiliki input di mana Anda tidak dapat memasukkan tempat desimal di sini, jika Anda mengetik

124
00:10:08,390 --> 00:10:13,990
di sini dan Anda tidak dapat melakukannya di iOS. Di Android, Anda sayangnya dapat melakukannya, jadi di sana

125
00:10:14,090 --> 00:10:16,490
kami juga harus menemukan perbaikan yang berbeda.