Jadi kami menghabiskan waktu pada input tetapi menangani input pengguna penting, Anda ingin melakukannya
dengan cara yang terasa alami bagi pengguna, yang masuk akal
bagi pengguna dan di
mana Anda tidak akan pernah mempercayai pengguna Anda dan Anda selalu memvalidasi apa pengguna masuk dan kami
akan menyelami lebih dalam hal validasi keseluruhan ini,
input pengguna menyerahkan hal-hal nanti dalam kursus di mana kami juga menerima input yang lebih kompleks
daripada angka
sederhana tetapi untuk sekarang, ini adalah pandangan pertama yang bagus tentang bagaimana Anda dapat mendesain seperti input dan
bagaimana Anda dapat memastikan Anda mendapatkan data yang Anda butuhkan. Dengan itu, saya tidak tahu tentang Anda tetapi saya pikir ini saatnya untuk juga
maju dengan permainan kami karena kami agak macet di sini,
ini semua adalah langkah-langkah penting tetapi kami tidak benar-benar maju dengan permainan kami atau dengan aplikasi kami di sini .
Jadi mari kita pastikan kita melakukan itu sebagai langkah selanjutnya dan untuk
itu, mengapa kita tidak memastikan bahwa tombol kita melakukan sesuatu? Mari kita mulai dengan tombol reset sangat cepat karena itu akan
menjadi sederhana. Ketika Anda menekannya,
saya tentu saja hanya ingin mengatur ulang nilai yang dimasukkan. Jadi saya akan mendaftarkan fungsi baru di sana
di komponen layar mulai permainan, beri nama reset handler input dan itu hanya konvensi penamaan yang
saya suka, nama fungsi-fungsi ini yang dipicu pada event pengguna sesuatu handler pada akhirnya hanya untuk membuatnya jelas bahwa ini
menangani acara-acara tertentu, itu tidak harus
dilakukan, hanya preferensi yang saya miliki untuk aplikasi Bereaksi pada umumnya dan karena itu juga untuk aplikasi
Bereaksi Asli.
Ini akan menjadi fungsi yang kemudian memanggil set nilai yang dimasukkan yang merupakan fungsi pengaturan negara kita di
sini untuk memperbarui status yang kita masukkan kembali ke input dan mengatur ini
ke string kosong dan ya, dengan itu kita dapat menghubungkan ini ke tombol reset di sini, onPress sekarang seharusnya
cukup menjalankan reset handler input seperti itu.
Mari
kita coba sebentar, mari kita masukkan
sesuatu di sini,
reset dan hilang, itu
terlihat bagus dan
juga memastikan bahwa tombol ini di sini, tombol konfirmasi melakukan sesuatu. Untuk itu, saya akan menambahkan tombol lain, mengkonfirmasi input handler dan kita bisa langsung memulai permainan
di sini tetapi juga hanya untuk berlatih ini, saya
ingin memberi pengguna satu kesempatan terakhir untuk mengubah pilihannya, jadi di sini saya hanya ingin mengetik dari output a ini adalah pilihan Anda,
apakah Anda
ingin memulai pesan, di mana kemudian pengguna mendapat tombol untuk memulai permainan, hanya langkah tambahan sehingga kami memiliki
beberapa latihan tambahan di sini. Untuk itu, saya akan
menambahkan status baru yang mengatur apakah pengguna telah mengonfirmasi keadaan sebelumnya dan pada awalnya, itu salah tetapi tentu saja kami dapat
mengubah ini dan kami ingin bisa mendapatkan status saat ini.
Jadi di sini kita dapatkan apakah pengguna telah mengonfirmasi atau tidak dan
kita dapat mengatur status terkonfirmasi ini dengan elemen kedua dalam array yang kita ekstrak. Jadi di sana di konfirmasi input handler,
saya atur confirm to true, pada reset handler input by the way, saya atur ini ke false karena jika pengguna
mengklik reset, pengguna tentu harus mengkonfirmasi nilai-nilai sehingga kita harus mengatur ulang ini dan
kemudian di sini di handler input input, saya juga
ingin melakukan dua hal yang berbeda, dua hal lainnya.
Salah satunya adalah mereset nilai yang dimasukkan tetapi juga tentu saja menyimpan nilai yang dimasukkan sebagai nilai yang akan
digunakan untuk memulai permainan.
Kita dapat melakukan itu dengan
keadaan lain yang sedang kita kelola yang awalnya tidak memiliki apa-apa, tidak memiliki nilai, tidak ditentukan pada awalnya karena itu harus menjadi
nomor yang dipilih dan yang seharusnya sekarang juga benar-benar berupa angka dan bukan teks.
Jadi di sini, kami memiliki nomor yang dipilih dan
fungsi untuk mengaturnya dan ketika pengguna mengklik konfirmasi sebelum saya mengatur ulang nilai yang saya masukkan, meskipun ini semua akan dikelompokkan
bersama jadi kami juga dapat menggunakan nilai yang dimasukkan di sini setelah mengaturnya ke string kosong karena
ini hanya akan dilakukan dalam siklus render berikutnya dan tidak segera setelah baris ini dieksekusi.
Jadi kita masih dapat dengan aman menjalankan atau mengakses nilai yang dimasukkan ini setelahnya
jika kita mau karena di sini, saya ingin mengatur nilai yang dimasukkan dengan parseInt dengan meneruskan nilai yang dimasukkan, jadi saya menetapkan ini menjadi nomor yang saya pilih dan
lagi, saya masih
dapat mengakses memasukkan nilai di sini meskipun kami menyetel ulangnya karena hal pengaturan ulang ini di
sini pada dasarnya akan di-antri oleh Bereaksi dan hanya akan diproses pada saat berikutnya komponen dirender
setelahnya
dan ketiga perubahan status ini semuanya dikumpulkan bersama untuk menghasilkan satu siklus render, jadi kami dapat dengan aman mengakses nilai
yang dimasukkan di sini tetapi kita juga bisa melakukannya sebelum kita
meresetnya, itu tidak masalah.
Namun yang penting adalah kita mem-parsing ini sebagai bilangan bulat sehingga kita mengonversi teks ini menjadi angka di
sini dan sebenarnya, saya akan menambahkan langkah ekstra lagi sebelum saya melakukannya. Tepat di awal, saya akan memiliki nomor yang saya
pilih di sini yaitu nomor yang
diurai dan sebelum saya melakukan apa pun, saya ingin memeriksa apakah nomor yang dipilih bukan angka yang merupakan nilai Javascript
default, jadi jika entah bagaimana itu masih bukan nomor meskipun kami mencoba memeriksa karakter yang tidak valid atau
jika nomor yang dipilih lebih kecil atau sama dengan nol.
Jika ya, maka saya hanya ingin kembali, saya
tidak ingin
melanjutkan, jadi pengembalian akan menyelesaikan eksekusi fungsi dan tidak akan mengkonfirmasi, tidak akan menggunakan ini sebagai
nilai karena nilainya tidak valid,
hanya angka positif yang diizinkan dan tidak ada nomor yang tidak valid diizinkan.
Selain itu, saya juga ingin menambahkan satu cek tambahan dan memeriksa apakah nomor yang dipilih mungkin lebih besar dari 99 karena
itu juga tidak diperbolehkan, saya ingin
memiliki nomor antara 1 dan 99 dan itu harus berupa angka. Jika tidak sesuai dengan kriteria itu, maka kami akan kembali,
jika tidak, kami akan menetapkan nomor yang dipilih ini sebagai nomor yang dipilih dan kemudian mengatur ulang input dan kemudian
ketiga panggilan keadaan panggilan ini akan dikumpulkan bersama-sama dan komponen akan merender ulang dan kami akan meminta
status baru kami yang menjadikan nomor ini diperhitungkan sebagai nomor yang dipilih. Jadi sekarang kita dapat menghubungkan handler input konfirmasi ke tombol
konfirmasi di sini dan sekarang beberapa umpan balik visual juga akan menyenangkan untuk melihat
bahwa konfirmasi berfungsi atau juga mendapatkan kesalahan jika kita melanggar salah satu aturan ini di sini, sehingga kita tidak hanya kembali
tetapi juga menampilkan peringatan.
Sekarang mari kita mulai dengan umpan balik sebelum kita bekerja pada peringatan. Untuk umpan balik, di sini di
bawah fungsi ini tetapi di dalam komponen fungsional kami, saya ingin memeriksa apakah kami telah mengkonfirmasi dan kemudian
mengatur beberapa konten khusus yang harus di-output.
Jadi di sini, kami memiliki output yang dikonfirmasi yang
biasanya hanya tidak terdefinisi tetapi jika kami telah mengkonfirmasi, maka output yang dikonfirmasi adalah beberapa kode jsx di mana kami meringkas
apa yang dimasukkan pengguna dan memberi pengguna tombol mulai permainan.
Sekarang hanya untuk melihat apakah itu berfungsi, mari kita lanjutkan dengan beberapa teks di sini dan katakan saja nomor yang dipilih dan
hasilkan nomor yang dipilih di sini, nomor yang dipilih, ini
adalah keadaan kita yang sedang kita kelola di sini.
Jadi karena kita memanggil set terkonfirmasi dan seterusnya, komponen akan dirender ulang saat ini dipilih, sehingga seluruh
fungsi komponen ini akan dieksekusi lagi dan itu berarti bahwa dikonfirmasi akan benar untuk dijalankan berikutnya
karena kita atur ke true di sini dan oleh karena itu kami akan menetapkan
output
yang dikonfirmasi menjadi teks itu dan sekarang kami dapat menambahkan output yang dikonfirmasi, katakanlah di sini di bawah kartu kami.
Jadi di sana saya ingin menampilkan output yang dikonfirmasi dan itu tidak terdefinisi,
tidak
mencetak apa pun ke layar atau teks ini. Dengan yang disimpan jika kita kembali dan saya memasukkan nomor dan mengonfirmasi di sini, kita melihat
nomornya.
Jika saya memasukkan sesuatu yang tidak valid seperti
nol, kami tidak melihatnya, jadi cek kami sepertinya berfungsi dan nomor yang valid adalah keluaran.
Nah, itu bukan desain final yang ingin saya miliki tetapi itu membuktikan bahwa itu berhasil.
Sebelum kami menyelesaikan desain ini, mari pastikan bahwa kami juga menampilkan peringatan jika sesuatu yang tidak valid dimasukkan.