Sekarang kami mulai bekerja pada input dan itu tidak terlihat terlalu buruk tetapi kami
ingin memastikan bahwa pengguna hanya dapat memasukkan angka yang hanya digit dan bahwa kami tidak dapat memasukkan titik di sini atau koma atau tempel
di beberapa non- konten numerik dan untuk
itu, kami tentu saja perlu memvalidasi apa yang dimasukkan pengguna di sini.
Sekarang untuk memvalidasi apa yang dimasukkan pengguna, saya ingin, seperti yang saya tunjukkan sebelumnya, pada dasarnya menyimpan nilai yang
dimasukkan
pengguna pada setiap keystroke dan memasukkannya kembali ke input tetapi setelah setiap
keystroke, saya juga ingin memvalidasi input untuk membuat yakin bahwa kami memiliki nilai yang
valid di sana, jadi pada dasarnya angka. Untuk yang pertama-tama, kita perlu mengelola beberapa status
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
saya, jadi daftarkan beberapa nyatakan dan itu akan menjadi nilai yang dimasukkan dan meskipun itu akan menjadi angka nanti, secara
teknis itu adalah string di awal karena semua input hanyalah sebuah string dan Anda secara
manual harus
mengonversi ini ke angka kemudian jika Anda mau. Saya juga akan menambahkan fungsi nilai yang dimasukkan yang ditetapkan
di sini, elemen kedua yang kami ambil dari status penggunaan array memberi kami dan sekarang
kami dapat menambahkan konstanta di sini yang akan saya beri nama penangan input nomor atau apa pun yang Anda ingin beri nama.
Ini akan mendapatkan teks input dan itulah fungsinya karena itu hanya fungsi yang saya simpan
di konstanta ini yang ingin saya sambungkan ke input saya dan di sana ke onChangeText, arahkan ke
penangan input angka dan masukkan
kembali nilai itu dan itulah kami nilai yang dimasukkan.
Sekarang biasanya, kita hanya akan mengatakan setel nilai yang dimasukkan di sini dan atur teks input menjadi nilai
yang baru kita masukkan yang kita
masukkan kembali ke dalam input tetapi di sini, sebenarnya saya pertama-tama memvalidasi input.
Jadi yang akan saya lakukan di sini adalah saya tidak akan menetapkan nilai
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
teks input akan menjadi string dan itu adalah Metode Javascript normal yang ada pada string, di mana saya
mengganti beberapa konten berdasarkan ekspresi reguler. Sekarang ekspresi reguler bisa menakutkan tetapi
itu sederhana, kami membuatnya dengan dua garis miring ke depan dan di sana, saya akan menambahkan tanda kurung siku dan pada dasarnya dengan
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
tidak hanya akan mencari hit pertama pada dasarnya tetapi akan mencari seluruh teks, saya akan menggantinya dengan
string kosong,
jadi pada dasarnya saya akan menjatuhkan non-jumlah nilai. Itulah yang terjadi di sini dan itulah yang saya
simpan di negara baru saya dan
dengan itu, kita harus memastikan bahwa pengguna tidak dapat memasukkan apa pun yang bukan angka.
Jadi mari kita periksa di
sini di Android, jika saya menekan koma, Anda akan melihat bahwa secara instan dihapus dan itulah
yang kami butuhkan di sini, kami hanya mengizinkan nilai angka.
Jadi itu sedikit validasi yang kami miliki di tempat
ini, tidak semua yang saya inginkan tetapi kami masih belum selesai dengan input karena pada iOS, jika kami berada dalam mode input itu
dan kami ingin menutup keyboard itu, sekarang juga itu tidak bisa dilakukan.
Kita tidak bisa mengklik di luar dan menutupnya dan alangkah baiknya jika kita bisa. Sekarang untuk memastikan bahwa kita dapat dan bahwa kita
menutup keyboard jika pengguna mengetuk tempat lain, saya
benar-benar akan membungkus seluruh tampilan di sini dengan komponen khusus yang disediakan oleh React Native dan itu adalah komponen yang
dapat disentuh tanpa umpan balik, jadi
komponen yang memungkinkan kita untuk mendaftarkan pendengar sentuh tanpa memberikan umpan balik visual karena itulah yang
kami butuhkan di sini.
Kita dapat membungkus seluruh layar kita dengan ini, sehingga
seluruh tampilan kita dapat dibungkus dengan pendengar yang dapat disentuh ini sehingga di sana atau di sana,
kita sekarang dapat mendaftar atau mendengarkan acara pers dan ketika pers terjadi, saya ingin
mengabaikan keyboard dan untuk itu, React Native memberi kami API yang berguna, kami dapat
mengimpor dari React Native dan itulah API keyboard. Itu sekarang bukan komponen tetapi itu adalah API di mana kita dapat
berinteraksi dengan perangkat asli itu sendiri sehingga bisa dikatakan, dalam hal ini dengan keyboard dan di sini dengan menekan tombol ini, saya
ingin menjalankan fungsi dan di sini saya akan pergi dengan fungsi inline sederhana, fungsi anonim pendek, Anda tentu saja dapat juga menggunakan
fungsi bernama tetapi di sini semua yang ingin
saya lakukan adalah saya ingin memanggil keyboard. memberhentikan.
Itu fungsi API keyboard ini yang kami impor dari React Native memberi kami dan ini sesuai dengan
namanya, sehingga sekarang jika
kami mengetuk di sini, kami dapat mengetik
tetapi jika saya mengetuk di tempat lain, kami mengabaikan keyboard dan dari Tentu saja terjadi pada kedua platform dan
saya pikir itu adalah pengalaman pengguna yang lebih baik karena itulah yang Anda harapkan, bahwa Anda
menutup keyboard jika Anda mengetuk tempat lain di layar.