1 00:00:02,350 --> 00:00:06,760 Jadi kami menghabiskan waktu pada input tetapi menangani input pengguna penting, Anda ingin melakukannya 2 00:00:06,760 --> 00:00:09,970 dengan cara yang terasa alami bagi pengguna, yang masuk akal 3 00:00:09,970 --> 00:00:11,470 bagi pengguna dan di 4 00:00:11,590 --> 00:00:17,000 mana Anda tidak akan pernah mempercayai pengguna Anda dan Anda selalu memvalidasi apa pengguna masuk dan kami 5 00:00:17,020 --> 00:00:19,750 akan menyelami lebih dalam hal validasi keseluruhan ini, 6 00:00:19,750 --> 00:00:24,760 input pengguna menyerahkan hal-hal nanti dalam kursus di mana kami juga menerima input yang lebih kompleks 7 00:00:24,760 --> 00:00:25,520 daripada angka 8 00:00:25,540 --> 00:00:31,030 sederhana tetapi untuk sekarang, ini adalah pandangan pertama yang bagus tentang bagaimana Anda dapat mendesain seperti input dan 9 00:00:31,210 --> 00:00:37,910 bagaimana Anda dapat memastikan Anda mendapatkan data yang Anda butuhkan. Dengan itu, saya tidak tahu tentang Anda tetapi saya pikir ini saatnya untuk juga 10 00:00:37,920 --> 00:00:40,710 maju dengan permainan kami karena kami agak macet di sini, 11 00:00:40,710 --> 00:00:45,600 ini semua adalah langkah-langkah penting tetapi kami tidak benar-benar maju dengan permainan kami atau dengan aplikasi kami di sini . 12 00:00:45,600 --> 00:00:49,520 Jadi mari kita pastikan kita melakukan itu sebagai langkah selanjutnya dan untuk 13 00:00:49,530 --> 00:00:56,690 itu, mengapa kita tidak memastikan bahwa tombol kita melakukan sesuatu? Mari kita mulai dengan tombol reset sangat cepat karena itu akan 14 00:00:56,690 --> 00:00:58,760 menjadi sederhana. Ketika Anda menekannya, 15 00:00:58,790 --> 00:01:04,400 saya tentu saja hanya ingin mengatur ulang nilai yang dimasukkan. Jadi saya akan mendaftarkan fungsi baru di sana 16 00:01:04,410 --> 00:01:10,310 di komponen layar mulai permainan, beri nama reset handler input dan itu hanya konvensi penamaan yang 17 00:01:10,310 --> 00:01:17,450 saya suka, nama fungsi-fungsi ini yang dipicu pada event pengguna sesuatu handler pada akhirnya hanya untuk membuatnya jelas bahwa ini 18 00:01:17,450 --> 00:01:19,840 menangani acara-acara tertentu, itu tidak harus 19 00:01:19,970 --> 00:01:26,210 dilakukan, hanya preferensi yang saya miliki untuk aplikasi Bereaksi pada umumnya dan karena itu juga untuk aplikasi 20 00:01:26,210 --> 00:01:27,040 Bereaksi Asli. 21 00:01:27,260 --> 00:01:34,040 Ini akan menjadi fungsi yang kemudian memanggil set nilai yang dimasukkan yang merupakan fungsi pengaturan negara kita di 22 00:01:34,220 --> 00:01:39,370 sini untuk memperbarui status yang kita masukkan kembali ke input dan mengatur ini 23 00:01:39,460 --> 00:01:46,690 ke string kosong dan ya, dengan itu kita dapat menghubungkan ini ke tombol reset di sini, onPress sekarang seharusnya 24 00:01:46,700 --> 00:01:49,540 cukup menjalankan reset handler input seperti itu. 25 00:01:49,700 --> 00:01:50,780 Mari 26 00:01:50,780 --> 00:01:53,760 kita coba sebentar, mari kita masukkan 27 00:01:53,780 --> 00:01:55,110 sesuatu di sini, 28 00:01:55,310 --> 00:01:57,440 reset dan hilang, itu 29 00:01:57,470 --> 00:01:58,790 terlihat bagus dan 30 00:01:58,790 --> 00:02:09,390 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 31 00:02:09,420 --> 00:02:12,600 di sini tetapi juga hanya untuk berlatih ini, saya 32 00:02:12,600 --> 00:02:20,030 ingin memberi pengguna satu kesempatan terakhir untuk mengubah pilihannya, jadi di sini saya hanya ingin mengetik dari output a ini adalah pilihan Anda, 33 00:02:20,200 --> 00:02:21,090 apakah Anda 34 00:02:21,090 --> 00:02:27,050 ingin memulai pesan, di mana kemudian pengguna mendapat tombol untuk memulai permainan, hanya langkah tambahan sehingga kami memiliki 35 00:02:27,360 --> 00:02:30,910 beberapa latihan tambahan di sini. Untuk itu, saya akan 36 00:02:30,930 --> 00:02:38,800 menambahkan status baru yang mengatur apakah pengguna telah mengonfirmasi keadaan sebelumnya dan pada awalnya, itu salah tetapi tentu saja kami dapat 37 00:02:38,910 --> 00:02:43,020 mengubah ini dan kami ingin bisa mendapatkan status saat ini. 38 00:02:43,020 --> 00:02:45,980 Jadi di sini kita dapatkan apakah pengguna telah mengonfirmasi atau tidak dan 39 00:02:45,990 --> 00:02:52,410 kita dapat mengatur status terkonfirmasi ini dengan elemen kedua dalam array yang kita ekstrak. Jadi di sana di konfirmasi input handler, 40 00:02:52,410 --> 00:03:00,160 saya atur confirm to true, pada reset handler input by the way, saya atur ini ke false karena jika pengguna 41 00:03:00,160 --> 00:03:05,710 mengklik reset, pengguna tentu harus mengkonfirmasi nilai-nilai sehingga kita harus mengatur ulang ini dan 42 00:03:05,710 --> 00:03:09,110 kemudian di sini di handler input input, saya juga 43 00:03:09,160 --> 00:03:12,750 ingin melakukan dua hal yang berbeda, dua hal lainnya. 44 00:03:12,880 --> 00:03:20,530 Salah satunya adalah mereset nilai yang dimasukkan tetapi juga tentu saja menyimpan nilai yang dimasukkan sebagai nilai yang akan 45 00:03:20,530 --> 00:03:22,300 digunakan untuk memulai permainan. 46 00:03:22,390 --> 00:03:24,840 Kita dapat melakukan itu dengan 47 00:03:24,880 --> 00:03:34,430 keadaan lain yang sedang kita kelola yang awalnya tidak memiliki apa-apa, tidak memiliki nilai, tidak ditentukan pada awalnya karena itu harus menjadi 48 00:03:34,430 --> 00:03:40,370 nomor yang dipilih dan yang seharusnya sekarang juga benar-benar berupa angka dan bukan teks. 49 00:03:40,910 --> 00:03:44,400 Jadi di sini, kami memiliki nomor yang dipilih dan 50 00:03:44,480 --> 00:03:51,560 fungsi untuk mengaturnya dan ketika pengguna mengklik konfirmasi sebelum saya mengatur ulang nilai yang saya masukkan, meskipun ini semua akan dikelompokkan 51 00:03:51,610 --> 00:03:57,290 bersama jadi kami juga dapat menggunakan nilai yang dimasukkan di sini setelah mengaturnya ke string kosong karena 52 00:03:57,470 --> 00:04:02,540 ini hanya akan dilakukan dalam siklus render berikutnya dan tidak segera setelah baris ini dieksekusi. 53 00:04:02,540 --> 00:04:07,530 Jadi kita masih dapat dengan aman menjalankan atau mengakses nilai yang dimasukkan ini setelahnya 54 00:04:07,730 --> 00:04:17,930 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 55 00:04:18,050 --> 00:04:19,300 lagi, saya masih 56 00:04:19,340 --> 00:04:24,980 dapat mengakses memasukkan nilai di sini meskipun kami menyetel ulangnya karena hal pengaturan ulang ini di 57 00:04:25,190 --> 00:04:30,740 sini pada dasarnya akan di-antri oleh Bereaksi dan hanya akan diproses pada saat berikutnya komponen dirender 58 00:04:30,740 --> 00:04:31,480 setelahnya 59 00:04:31,580 --> 00:04:38,660 dan ketiga perubahan status ini semuanya dikumpulkan bersama untuk menghasilkan satu siklus render, jadi kami dapat dengan aman mengakses nilai 60 00:04:38,660 --> 00:04:42,850 yang dimasukkan di sini tetapi kita juga bisa melakukannya sebelum kita 61 00:04:42,860 --> 00:04:44,200 meresetnya, itu tidak masalah. 62 00:04:44,210 --> 00:04:49,520 Namun yang penting adalah kita mem-parsing ini sebagai bilangan bulat sehingga kita mengonversi teks ini menjadi angka di 63 00:04:49,520 --> 00:04:57,050 sini dan sebenarnya, saya akan menambahkan langkah ekstra lagi sebelum saya melakukannya. Tepat di awal, saya akan memiliki nomor yang saya 64 00:04:57,140 --> 00:05:00,410 pilih di sini yaitu nomor yang 65 00:05:00,410 --> 00:05:08,660 diurai dan sebelum saya melakukan apa pun, saya ingin memeriksa apakah nomor yang dipilih bukan angka yang merupakan nilai Javascript 66 00:05:08,660 --> 00:05:16,550 default, jadi jika entah bagaimana itu masih bukan nomor meskipun kami mencoba memeriksa karakter yang tidak valid atau 67 00:05:16,550 --> 00:05:20,730 jika nomor yang dipilih lebih kecil atau sama dengan nol. 68 00:05:21,200 --> 00:05:24,140 Jika ya, maka saya hanya ingin kembali, saya 69 00:05:24,140 --> 00:05:25,430 tidak ingin 70 00:05:25,460 --> 00:05:31,580 melanjutkan, jadi pengembalian akan menyelesaikan eksekusi fungsi dan tidak akan mengkonfirmasi, tidak akan menggunakan ini sebagai 71 00:05:31,850 --> 00:05:33,710 nilai karena nilainya tidak valid, 72 00:05:33,830 --> 00:05:39,010 hanya angka positif yang diizinkan dan tidak ada nomor yang tidak valid diizinkan. 73 00:05:39,020 --> 00:05:46,340 Selain itu, saya juga ingin menambahkan satu cek tambahan dan memeriksa apakah nomor yang dipilih mungkin lebih besar dari 99 karena 74 00:05:46,350 --> 00:05:48,770 itu juga tidak diperbolehkan, saya ingin 75 00:05:48,770 --> 00:05:56,600 memiliki nomor antara 1 dan 99 dan itu harus berupa angka. Jika tidak sesuai dengan kriteria itu, maka kami akan kembali, 76 00:05:56,840 --> 00:06:03,740 jika tidak, kami akan menetapkan nomor yang dipilih ini sebagai nomor yang dipilih dan kemudian mengatur ulang input dan kemudian 77 00:06:03,740 --> 00:06:09,440 ketiga panggilan keadaan panggilan ini akan dikumpulkan bersama-sama dan komponen akan merender ulang dan kami akan meminta 78 00:06:09,440 --> 00:06:17,790 status baru kami yang menjadikan nomor ini diperhitungkan sebagai nomor yang dipilih. Jadi sekarang kita dapat menghubungkan handler input konfirmasi ke tombol 79 00:06:17,790 --> 00:06:23,700 konfirmasi di sini dan sekarang beberapa umpan balik visual juga akan menyenangkan untuk melihat 80 00:06:23,700 --> 00:06:32,220 bahwa konfirmasi berfungsi atau juga mendapatkan kesalahan jika kita melanggar salah satu aturan ini di sini, sehingga kita tidak hanya kembali 81 00:06:32,220 --> 00:06:34,440 tetapi juga menampilkan peringatan. 82 00:06:35,320 --> 00:06:41,870 Sekarang mari kita mulai dengan umpan balik sebelum kita bekerja pada peringatan. Untuk umpan balik, di sini di 83 00:06:42,650 --> 00:06:51,710 bawah fungsi ini tetapi di dalam komponen fungsional kami, saya ingin memeriksa apakah kami telah mengkonfirmasi dan kemudian 84 00:06:51,710 --> 00:06:54,990 mengatur beberapa konten khusus yang harus di-output. 85 00:06:55,010 --> 00:06:58,900 Jadi di sini, kami memiliki output yang dikonfirmasi yang 86 00:06:58,970 --> 00:07:07,340 biasanya hanya tidak terdefinisi tetapi jika kami telah mengkonfirmasi, maka output yang dikonfirmasi adalah beberapa kode jsx di mana kami meringkas 87 00:07:07,340 --> 00:07:11,330 apa yang dimasukkan pengguna dan memberi pengguna tombol mulai permainan. 88 00:07:11,330 --> 00:07:18,990 Sekarang hanya untuk melihat apakah itu berfungsi, mari kita lanjutkan dengan beberapa teks di sini dan katakan saja nomor yang dipilih dan 89 00:07:19,020 --> 00:07:22,470 hasilkan nomor yang dipilih di sini, nomor yang dipilih, ini 90 00:07:22,470 --> 00:07:25,700 adalah keadaan kita yang sedang kita kelola di sini. 91 00:07:25,770 --> 00:07:32,100 Jadi karena kita memanggil set terkonfirmasi dan seterusnya, komponen akan dirender ulang saat ini dipilih, sehingga seluruh 92 00:07:32,100 --> 00:07:38,010 fungsi komponen ini akan dieksekusi lagi dan itu berarti bahwa dikonfirmasi akan benar untuk dijalankan berikutnya 93 00:07:38,040 --> 00:07:43,470 karena kita atur ke true di sini dan oleh karena itu kami akan menetapkan 94 00:07:43,500 --> 00:07:44,310 output 95 00:07:44,310 --> 00:07:51,820 yang dikonfirmasi menjadi teks itu dan sekarang kami dapat menambahkan output yang dikonfirmasi, katakanlah di sini di bawah kartu kami. 96 00:07:51,820 --> 00:07:57,340 Jadi di sana saya ingin menampilkan output yang dikonfirmasi dan itu tidak terdefinisi, 97 00:07:57,340 --> 00:07:57,940 tidak 98 00:07:58,060 --> 00:08:05,900 mencetak apa pun ke layar atau teks ini. Dengan yang disimpan jika kita kembali dan saya memasukkan nomor dan mengonfirmasi di sini, kita melihat 99 00:08:05,900 --> 00:08:06,410 nomornya. 100 00:08:06,950 --> 00:08:10,210 Jika saya memasukkan sesuatu yang tidak valid seperti 101 00:08:10,250 --> 00:08:15,360 nol, kami tidak melihatnya, jadi cek kami sepertinya berfungsi dan nomor yang valid adalah keluaran. 102 00:08:15,400 --> 00:08:19,200 Nah, itu bukan desain final yang ingin saya miliki tetapi itu membuktikan bahwa itu berhasil. 103 00:08:19,390 --> 00:08:26,170 Sebelum kami menyelesaikan desain ini, mari pastikan bahwa kami juga menampilkan peringatan jika sesuatu yang tidak valid dimasukkan.