1 00:00:02,140 --> 00:00:06,630 Sekarang kami mulai bekerja pada input dan itu tidak terlihat terlalu buruk tetapi kami 2 00:00:06,630 --> 00:00:13,980 ingin memastikan bahwa pengguna hanya dapat memasukkan angka yang hanya digit dan bahwa kami tidak dapat memasukkan titik di sini atau koma atau tempel 3 00:00:13,980 --> 00:00:16,440 di beberapa non- konten numerik dan untuk 4 00:00:16,530 --> 00:00:20,280 itu, kami tentu saja perlu memvalidasi apa yang dimasukkan pengguna di sini. 5 00:00:20,550 --> 00:00:27,900 Sekarang untuk memvalidasi apa yang dimasukkan pengguna, saya ingin, seperti yang saya tunjukkan sebelumnya, pada dasarnya menyimpan nilai yang 6 00:00:27,900 --> 00:00:28,440 dimasukkan 7 00:00:28,440 --> 00:00:33,510 pengguna pada setiap keystroke dan memasukkannya kembali ke input tetapi setelah setiap 8 00:00:33,510 --> 00:00:39,000 keystroke, saya juga ingin memvalidasi input untuk membuat yakin bahwa kami memiliki nilai yang 9 00:00:39,000 --> 00:00:44,770 valid di sana, jadi pada dasarnya angka. Untuk yang pertama-tama, kita perlu mengelola beberapa status 10 00:00:44,860 --> 00:00:54,510 di sini di layar mulai permainan, jadi saya akan mengimpor status penggunaan dan kemudian di sini di awal komponen ini, saya akan mengatur panggilan status penggunaan 11 00:00:54,520 --> 00:01:02,180 saya, jadi daftarkan beberapa nyatakan dan itu akan menjadi nilai yang dimasukkan dan meskipun itu akan menjadi angka nanti, secara 12 00:01:02,300 --> 00:01:08,000 teknis itu adalah string di awal karena semua input hanyalah sebuah string dan Anda secara 13 00:01:08,000 --> 00:01:09,080 manual harus 14 00:01:09,080 --> 00:01:15,170 mengonversi ini ke angka kemudian jika Anda mau. Saya juga akan menambahkan fungsi nilai yang dimasukkan yang ditetapkan 15 00:01:15,170 --> 00:01:19,220 di sini, elemen kedua yang kami ambil dari status penggunaan array memberi kami dan sekarang 16 00:01:19,430 --> 00:01:25,660 kami dapat menambahkan konstanta di sini yang akan saya beri nama penangan input nomor atau apa pun yang Anda ingin beri nama. 17 00:01:25,700 --> 00:01:32,830 Ini akan mendapatkan teks input dan itulah fungsinya karena itu hanya fungsi yang saya simpan 18 00:01:32,830 --> 00:01:40,690 di konstanta ini yang ingin saya sambungkan ke input saya dan di sana ke onChangeText, arahkan ke 19 00:01:40,960 --> 00:01:43,930 penangan input angka dan masukkan 20 00:01:43,930 --> 00:01:48,330 kembali nilai itu dan itulah kami nilai yang dimasukkan. 21 00:01:48,420 --> 00:01:54,480 Sekarang biasanya, kita hanya akan mengatakan setel nilai yang dimasukkan di sini dan atur teks input menjadi nilai 22 00:01:54,480 --> 00:01:56,720 yang baru kita masukkan yang kita 23 00:01:56,820 --> 00:02:01,220 masukkan kembali ke dalam input tetapi di sini, sebenarnya saya pertama-tama memvalidasi input. 24 00:02:01,290 --> 00:02:06,300 Jadi yang akan saya lakukan di sini adalah saya tidak akan menetapkan nilai 25 00:02:06,330 --> 00:02:15,790 yang dimasukkan tepat ke teks di sini, sebagai gantinya saya akan mengaturnya ke teks input saya di mana saya mengganti dan saya bisa memanggil ganti karena 26 00:02:15,790 --> 00:02:22,450 teks input akan menjadi string dan itu adalah Metode Javascript normal yang ada pada string, di mana saya 27 00:02:22,450 --> 00:02:27,430 mengganti beberapa konten berdasarkan ekspresi reguler. Sekarang ekspresi reguler bisa menakutkan tetapi 28 00:02:27,430 --> 00:02:36,010 itu sederhana, kami membuatnya dengan dua garis miring ke depan dan di sana, saya akan menambahkan tanda kurung siku dan pada dasarnya dengan 29 00:02:36,040 --> 00:02:45,250 ungkapan ini mengatakan bahwa saya mengganti apa pun yang bukan angka 0 hingga 9, jadi bukan angka, secara global di seluruh teks sehingga itu berarti 30 00:02:45,250 --> 00:02:51,630 tidak hanya akan mencari hit pertama pada dasarnya tetapi akan mencari seluruh teks, saya akan menggantinya dengan 31 00:02:52,850 --> 00:02:53,940 string kosong, 32 00:02:56,620 --> 00:03:02,440 jadi pada dasarnya saya akan menjatuhkan non-jumlah nilai. Itulah yang terjadi di sini dan itulah yang saya 33 00:03:02,440 --> 00:03:04,540 simpan di negara baru saya dan 34 00:03:04,600 --> 00:03:09,460 dengan itu, kita harus memastikan bahwa pengguna tidak dapat memasukkan apa pun yang bukan angka. 35 00:03:09,460 --> 00:03:11,410 Jadi mari kita periksa di 36 00:03:11,410 --> 00:03:16,720 sini di Android, jika saya menekan koma, Anda akan melihat bahwa secara instan dihapus dan itulah 37 00:03:16,720 --> 00:03:19,960 yang kami butuhkan di sini, kami hanya mengizinkan nilai angka. 38 00:03:19,960 --> 00:03:24,030 Jadi itu sedikit validasi yang kami miliki di tempat 39 00:03:24,030 --> 00:03:32,890 ini, tidak semua yang saya inginkan tetapi kami masih belum selesai dengan input karena pada iOS, jika kami berada dalam mode input itu 40 00:03:32,890 --> 00:03:37,410 dan kami ingin menutup keyboard itu, sekarang juga itu tidak bisa dilakukan. 41 00:03:37,420 --> 00:03:44,500 Kita tidak bisa mengklik di luar dan menutupnya dan alangkah baiknya jika kita bisa. Sekarang untuk memastikan bahwa kita dapat dan bahwa kita 42 00:03:44,500 --> 00:03:47,960 menutup keyboard jika pengguna mengetuk tempat lain, saya 43 00:03:48,160 --> 00:03:56,020 benar-benar akan membungkus seluruh tampilan di sini dengan komponen khusus yang disediakan oleh React Native dan itu adalah komponen yang 44 00:03:56,020 --> 00:03:58,490 dapat disentuh tanpa umpan balik, jadi 45 00:03:58,630 --> 00:04:04,960 komponen yang memungkinkan kita untuk mendaftarkan pendengar sentuh tanpa memberikan umpan balik visual karena itulah yang 46 00:04:04,960 --> 00:04:07,060 kami butuhkan di sini. 47 00:04:07,150 --> 00:04:11,080 Kita dapat membungkus seluruh layar kita dengan ini, sehingga 48 00:04:11,080 --> 00:04:18,190 seluruh tampilan kita dapat dibungkus dengan pendengar yang dapat disentuh ini sehingga di sana atau di sana, 49 00:04:18,190 --> 00:04:24,070 kita sekarang dapat mendaftar atau mendengarkan acara pers dan ketika pers terjadi, saya ingin 50 00:04:24,070 --> 00:04:30,010 mengabaikan keyboard dan untuk itu, React Native memberi kami API yang berguna, kami dapat 51 00:04:30,010 --> 00:04:37,240 mengimpor dari React Native dan itulah API keyboard. Itu sekarang bukan komponen tetapi itu adalah API di mana kita dapat 52 00:04:37,240 --> 00:04:43,820 berinteraksi dengan perangkat asli itu sendiri sehingga bisa dikatakan, dalam hal ini dengan keyboard dan di sini dengan menekan tombol ini, saya 53 00:04:43,820 --> 00:04:50,230 ingin menjalankan fungsi dan di sini saya akan pergi dengan fungsi inline sederhana, fungsi anonim pendek, Anda tentu saja dapat juga menggunakan 54 00:04:50,230 --> 00:04:52,700 fungsi bernama tetapi di sini semua yang ingin 55 00:04:52,870 --> 00:04:57,230 saya lakukan adalah saya ingin memanggil keyboard. memberhentikan. 56 00:04:57,310 --> 00:05:02,680 Itu fungsi API keyboard ini yang kami impor dari React Native memberi kami dan ini sesuai dengan 57 00:05:02,680 --> 00:05:04,220 namanya, sehingga sekarang jika 58 00:05:04,360 --> 00:05:06,570 kami mengetuk di sini, kami dapat mengetik 59 00:05:06,580 --> 00:05:12,610 tetapi jika saya mengetuk di tempat lain, kami mengabaikan keyboard dan dari Tentu saja terjadi pada kedua platform dan 60 00:05:12,640 --> 00:05:17,740 saya pikir itu adalah pengalaman pengguna yang lebih baik karena itulah yang Anda harapkan, bahwa Anda 61 00:05:18,160 --> 00:05:21,040 menutup keyboard jika Anda mengetuk tempat lain di layar.