1 00:00:02,300 --> 00:00:08,300 Jadi mari kita lanjutkan bekerja pada ini dan mari kita ubah ini menjadi katakanlah fungsi penangan perubahan 2 00:00:09,020 --> 00:00:10,390 teks yang sekarang 3 00:00:10,400 --> 00:00:16,420 kita ditugaskan untuk mengubah teks di sini pada judul tetapi yang kita juga dapat menambahkan ke imageUrl kami. 4 00:00:16,430 --> 00:00:22,640 Jadi di sini untuk teks onChange, saya juga mengatur ini untuk penangan perubahan teks dan sekarang 5 00:00:22,640 --> 00:00:28,030 untuk bekerja, kita perlu memastikan bahwa fungsi ini mendapatkan informasi tentang input yang dipicu, 6 00:00:28,070 --> 00:00:32,390 jadi apakah Anda hanya mengetikkan judul atau di input imageUrl. 7 00:00:32,570 --> 00:00:36,580 Jadi selain mendapatkan teks, saya juga berharap untuk mendapatkan argumen yang berbeda, saya 8 00:00:36,710 --> 00:00:42,290 berharap untuk mendapatkan pengidentifikasi input saya atau semacamnya, Anda dapat menamainya apa pun yang Anda inginkan sehingga fungsi 9 00:00:42,290 --> 00:00:47,420 ini dapat digunakan kembali untuk beberapa input teks dan kami masih mendapatkan informasi tentang input mana 10 00:00:47,420 --> 00:00:48,560 yang memicu ini 11 00:00:48,680 --> 00:00:54,080 sehingga kami dapat meneruskan ini ke peredam kami di mana nantinya kami membutuhkan informasi ini untuk memperbarui 12 00:00:54,080 --> 00:00:55,370 keadaan kami dengan benar. 13 00:00:55,610 --> 00:01:01,520 Sekarang untuk mendapatkan fungsi pengenal input ini, kita harus pergi ke tempat-tempat di mana kita menggunakan 14 00:01:01,520 --> 00:01:09,140 penangan perubahan teks dan di sana, kita dapat misalnya menggunakan bind atau menggunakan fungsi panah anonim pembungkus alih-alih mengikat ini di 15 00:01:09,140 --> 00:01:14,570 mana saya tidak peduli tetapi lebih penting, untuk mengkonfigurasi argumen, fungsi ini akan didapat 16 00:01:14,570 --> 00:01:19,700 dan ada satu argumen khusus yang ingin saya sampaikan dan itulah pengidentifikasi input. 17 00:01:19,990 --> 00:01:24,650 Dan untuk fungsi ini di sini, untuk fungsi ini memanggil 18 00:01:24,650 --> 00:01:33,870 input teks ini, ini tentu saja akan menjadi judul. Untuk input ini di bawah sana, kami akan mengikat imageUrl ini 19 00:01:34,060 --> 00:01:40,450 dan sekali lagi ini akan menjadi pengidentifikasi yang juga Anda miliki di negara Anda di 20 00:01:40,570 --> 00:01:49,110 sana, dalam bentuk formulir yang Anda berikan ke peredam. Dengan itu ditambahkan, kami akan memastikan bahwa penangan perubahan teks dieksekusi 21 00:01:49,110 --> 00:01:51,710 dan mendapatkan argumen pengidentifikasi input ini. 22 00:01:51,990 --> 00:01:56,430 Argumen teks juga akan diterima karena itulah argumen default yang React Native akan 23 00:01:56,430 --> 00:02:01,740 berikan kepada kami dan ini kemudian akan secara otomatis diterima sebagai argumen terakhir dalam fungsi tersebut. 24 00:02:01,800 --> 00:02:05,000 Jadi kita tidak perlu dan kita sebenarnya tidak dapat mengikat ini 25 00:02:05,010 --> 00:02:07,410 di sini, itu akan diteruskan secara otomatis. 26 00:02:07,680 --> 00:02:13,260 Sekarang kita memiliki fungsi handler perubahan teks yang dapat digunakan kembali di sini 27 00:02:13,440 --> 00:02:21,030 dan kita dapat menetapkan ini ke input lain juga, seperti di sini untuk imageUrl, seperti di sini untuk harga, 28 00:02:21,060 --> 00:02:27,390 kita dapat mengikat handler perubahan teks, mengikat ini dan kemudian harga adalah pengidentifikasi kami di sini 29 00:02:27,720 --> 00:02:35,540 dan tentu saja juga untuk deskripsi, di sana kami tempel ini dan kemudian ikat ke ini dan pengidentifikasi adalah deskripsi. 30 00:02:35,780 --> 00:02:40,910 Sekarang pengendali yang sama ini dapat digunakan untuk semua input tetapi saat ini tentu saja, 31 00:02:40,910 --> 00:02:44,240 ia melakukan satu hal, memvalidasi setiap input untuk panjangnya. 32 00:02:44,240 --> 00:02:46,990 Sekarang mungkin masuk akal dan 33 00:02:47,030 --> 00:02:52,070 itu ada di sini, tidak ada input yang harus kosong tetapi Anda 34 00:02:52,070 --> 00:02:58,130 mungkin ingin validasi lainnya juga, misalnya harga saya di sini harus lebih besar dari 35 00:02:58,160 --> 00:03:05,360 nol katakanlah, sehingga nol tidak diperbolehkan sebagai input. Bahwa di sisi lain bukan beberapa kriteria yang penting 36 00:03:05,360 --> 00:03:10,670 bagi saya pada input lain. Kami akan menemukan solusi yang elegan untuk ini 37 00:03:10,670 --> 00:03:16,700 nanti, untuk saat ini mari kita tetap dengan validasi penyebut umum terkecil yang dapat kita terapkan pada semua input untuk 38 00:03:16,700 --> 00:03:18,690 memastikan mereka setidaknya tidak kosong dan 39 00:03:19,120 --> 00:03:23,040 mari kita fokus pada fungsi peredam dan bagaimana status kita. harus berubah ketika 40 00:03:23,060 --> 00:03:26,990 formulir ini memasukkan tindakan pembaruan dengan semua data yang dikirim karena saat ini 41 00:03:26,990 --> 00:03:28,720 tidak ada yang akan terjadi. 42 00:03:28,760 --> 00:03:33,920 Kami memiliki status awal kami pada peredam di sana dan itu akan diteruskan atau disimpan dalam bentuk formulir 43 00:03:33,920 --> 00:03:36,050 tetapi keadaan ini tidak akan pernah berubah. 44 00:03:36,080 --> 00:03:38,770 Nah itu sebabnya kami mengirim tindakan, kan? 45 00:03:38,820 --> 00:03:40,550 Itu sebabnya kami melakukan ini 46 00:03:40,560 --> 00:03:46,190 di sini, inilah sebabnya pembaruan formulir input dikirim dan itulah mengapa kami ingin menulis beberapa kode di sini 47 00:03:46,200 --> 00:03:49,190 di peredam ketika tindakan ini mencapai kami di sini. 48 00:03:49,500 --> 00:03:55,650 Sekarang di sana, jika tindakan ini mencapai kita, pada akhirnya tujuannya adalah untuk memastikan bahwa kita memperbarui snapshot keadaan 49 00:03:55,650 --> 00:03:56,220 ini, 50 00:03:56,220 --> 00:03:58,340 snapshot keadaan kita saat ini dengan tepat. 51 00:03:58,650 --> 00:04:04,470 Ini berarti bahwa misalnya, kita akan memerlukan beberapa nilai yang diperbarui dan untuk ini, saya membuat objek 52 00:04:04,470 --> 00:04:05,910 baru karena nilai input 53 00:04:06,030 --> 00:04:11,850 saya di sini, itu objek dan saya akan membuat yang baru untuk menggantinya dan pertama-tama saya akan 54 00:04:11,850 --> 00:04:14,340 menyalin yang sudah ada nyatakan nilai input. 55 00:04:14,400 --> 00:04:19,650 Perlu diingat bahwa keadaan di sini dilewatkan secara otomatis, itu adalah snapshot keadaan kita sebelum 56 00:04:19,650 --> 00:04:25,500 kita memperbaruinya dan karena itu pada awalnya, itulah snapshot keadaan ini di sini sebagai contoh dan ini 57 00:04:25,500 --> 00:04:27,610 akan memiliki kunci nilai input 58 00:04:27,720 --> 00:04:29,420 yang pada gilirannya memegang 59 00:04:29,460 --> 00:04:35,910 objek dan itulah yang Saya menyalin di sini, saya menyalin semua pasangan nilai kunci snapshot nilai input dan 60 00:04:35,910 --> 00:04:40,230 kemudian saya ingin mengganti pasangan nilai kunci untuk input yang tindakan ini 61 00:04:40,230 --> 00:04:46,740 dikirim, hal baiknya adalah kita melampirkan input pengidentifikasi tindakan. Jadi kita bisa pergi ke peredam 62 00:04:46,740 --> 00:04:52,360 dan secara dinamis menimpa kunci di sini di nilai input yang 63 00:04:52,380 --> 00:04:57,900 disalin, kuncinya adalah tindakan. input tentu saja, itulah pengidentifikasi input kami yang kami lampirkan pada tindakan 64 00:04:57,900 --> 00:05:00,420 dan nilainya harus berupa tindakan. nilai, 65 00:05:00,420 --> 00:05:06,840 itu saja yang perlu kita lakukan. Jadi kami menyimpan nilai yang dikirim secara 66 00:05:06,840 --> 00:05:12,060 dinamis dengan input yang ditugaskan secara dinamis dan memperbarui nilai input yang disalin. 67 00:05:12,060 --> 00:05:17,360 Sekarang kita dapat mengembalikan keadaan baru di sini karena itulah tujuan peredam Anda sendiri, seperti peredam Redux, 68 00:05:17,360 --> 00:05:21,360 pada akhirnya ia harus mengembalikan snapshot keadaan baru dan di sana saya ingin 69 00:05:21,840 --> 00:05:28,800 menyalin keadaan yang ada tetapi mengganti nilai input dengan nilai yang diperbarui yang menyalin nilai lama saya sehingga tidak ada data yang 70 00:05:28,800 --> 00:05:36,230 hilang dan kemudian menggantikan salah satu pasangan nilai kunci di sana. Sekarang jelas, tidak semua hanya mengganti 71 00:05:36,260 --> 00:05:39,820 nilai atau memperbarui nilai, saya juga 72 00:05:39,890 --> 00:05:42,810 ingin memperbarui validitas saya. 73 00:05:42,920 --> 00:05:48,700 Jadi di sini adalah validitas saya yang diperbarui dan seperti halnya dengan nilai-nilai, saya mulai dengan 74 00:05:48,710 --> 00:05:53,240 menyalin kunci input validitas saya karena validitas input adalah kunci di sini 75 00:05:53,340 --> 00:05:54,050 seperti 76 00:05:57,300 --> 00:06:05,190 yang Anda lihat dan kemudian saya ingin mengganti satu validitas untuk input yang kita dapatkan pada tindakan , jadi judul, imageUrl atau apa 77 00:06:05,220 --> 00:06:10,320 pun itu dan ganti ini dengan tindakan adalah valid karena kami mendapatkan informasi apakah itu 78 00:06:10,320 --> 00:06:13,790 valid atau tidak sebagai bagian dari tindakan yang dikirim, kan? 79 00:06:13,800 --> 00:06:17,400 Kami meneruskan ini di sini berdasarkan validasi dasar yang kami miliki di sini. 80 00:06:19,810 --> 00:06:24,160 Sekarang dengan itu, kita hanya perlu memperbarui ini di sini, jadi 81 00:06:24,340 --> 00:06:30,220 validitas input kami di sini sama dengan validitas yang diperbarui dan sekarang kita hanya perlu 82 00:06:30,220 --> 00:06:33,430 mengelola validitas formulir keseluruhan. Untuk itu, saya 83 00:06:34,640 --> 00:06:41,270 menambahkan variabel, variabel pembantu, formulir valid yang awalnya benar dan kemudian saya mengulangi semua validitas saya yang 84 00:06:41,270 --> 00:06:43,160 diperbarui yang merupakan validitas lama 85 00:06:43,160 --> 00:06:45,050 saya yang disalin dan kemudian 86 00:06:45,080 --> 00:06:49,520 satu validitas yang diperbarui untuk input yang baru saja kami ketikkan. 87 00:06:49,580 --> 00:06:57,020 Jadi di sini, kami memiliki for / in loop di mana kami memeriksa semua kunci dalam validitas yang diperbarui 88 00:06:57,020 --> 00:07:03,170 dan tujuannya sederhana, saya memeriksa setiap validitas input formulir dan jika semua validitas input formulir valid, 89 00:07:03,170 --> 00:07:06,170 jika semuanya benar, maka keseluruhan formulir valid. 90 00:07:06,230 --> 00:07:08,980 Jika setidaknya satu dari mereka 91 00:07:09,000 --> 00:07:17,090 salah, bentuk keseluruhannya salah, bentuk keseluruhan tidak valid. Jadi oleh karena itu di sini formulir ini valid sama dengan formulir terbaru 92 00:07:17,120 --> 00:07:24,320 adalah keadaan valid yang kita miliki dan kemudian validitas validasi terbaru untuk input yang sedang kita lihat, jadi untuk kunci ini dan kita 93 00:07:24,330 --> 00:07:26,320 akan melalui semua input di sini. 94 00:07:26,480 --> 00:07:31,530 Cara operator boolean ini bekerja sedemikian rupa sehingga false ini menimpa true, jadi jika 95 00:07:31,640 --> 00:07:37,730 input apa pun salah, form yang valid akan disetel ke false dan tidak dapat disetel menjadi true setelahnya. 96 00:07:37,730 --> 00:07:43,010 Jadi, jika setidaknya satu input tidak valid, formulir keseluruhan akan menjadi tidak valid dan karena itu 97 00:07:43,010 --> 00:07:48,200 sekarang saya tidak perlu menyalin status saya lagi di sini karena saya akan mengganti seluruh 98 00:07:48,200 --> 00:07:51,460 snapshot keadaan dan mengatur formulir berlaku untuk formulir turunan 99 00:07:52,940 --> 00:08:02,910 saya valid di sini dan tentu saja untuk menghindari kebingungan, kami juga dapat memberi nama formulir yang diperbarui ini berlaku di sini dan di sini dan di sini dan 100 00:08:03,540 --> 00:08:04,270 di sini. 101 00:08:06,030 --> 00:08:09,900 Sekarang hanya satu hal tambahan, jika kita tidak membuatnya menjadi ini 102 00:08:09,930 --> 00:08:16,560 jika blok, jadi jika beberapa tindakan lain dikirim atau yang lain, maka saya hanya akan mengembalikan keadaan tidak berubah 103 00:08:16,560 --> 00:08:18,870 di sini. Dengan itu, kami 104 00:08:18,870 --> 00:08:26,590 menambahkan logika peredam yang mampu menangani input apa pun atau mengetik apa pun ke dalam input teks kami, sekarang kami hanya perlu 105 00:08:26,610 --> 00:08:31,560 menggunakan status formulir yang akan berubah dengan setiap penekanan tombol yang persis seperti yang 106 00:08:31,560 --> 00:08:38,010 terjadi sebelumnya tetapi sekarang semua terpusat dan bergabung menjadi satu negara terkelola yang menurut saya jauh lebih bersih 107 00:08:38,190 --> 00:08:45,600 daripada memiliki banyak negara yang berbeda untuk validitas dan nilai. Dan omong-omong, mengelola semua status ini 108 00:08:45,600 --> 00:08:53,330 secara manual dan terpisah akan menjadi masalah besar ketika Anda ingin memvalidasi validitas formulir keseluruhan. 109 00:08:53,340 --> 00:08:59,250 Jadi sekarang kita bisa menggunakan bentuk formulir yang akan berubah dengan setiap penekanan tombol dan kita 110 00:08:59,790 --> 00:09:07,610 gunakan misalnya di sini pada nilai. Kami mengembalikan nilai input teks ini dengan mengakses nilai input status formulir. judul. 111 00:09:07,620 --> 00:09:15,160 Sekarang jelas, kami melakukan hal yang sama di sini untuk imageUrl, kami memberi makan ini kembali, jadi hanya apa 112 00:09:15,160 --> 00:09:19,710 yang kami lakukan sebelumnya dan sekarang dengan bentuk formulir kami 113 00:09:19,720 --> 00:09:26,040 dikelola dengan bantuan peredam, sama untuk harga tentu saja dan juga sama untuk deskripsi, seperti itu. 114 00:09:29,530 --> 00:09:35,010 Sekarang selain mengubahnya di sini, kita juga harus mengubahnya di beberapa tempat lain, misalnya di 115 00:09:35,140 --> 00:09:39,730 sini di ajukan handler tentunya. Di sana, judul valid, ini 116 00:09:39,730 --> 00:09:50,540 tidak ada lagi tetapi kita dapat memeriksa status validitas input form form, itu benar atau salah dan jika salah, itu berarti itu tidak 117 00:09:50,540 --> 00:09:52,250 valid, jadi pemeriksaan 118 00:09:52,250 --> 00:09:54,400 ini harus baik-baik saja. 119 00:09:54,530 --> 00:09:59,960 Namun tentu saja kami peduli tentang validitas semua input, jadi alih-alih hanya memeriksa semuanya secara 120 00:09:59,960 --> 00:10:05,270 manual di sini dengan menggabungkannya menjadi pernyataan if panjang, kami hanya dapat memeriksa apakah 121 00:10:05,270 --> 00:10:10,880 form state form valid adalah false karena itu berarti beberapa input salah dan oleh karena itu 122 00:10:10,880 --> 00:10:11,750 kami menunjukkan 123 00:10:11,750 --> 00:10:18,300 kesalahan ini, itu pemeriksaan yang lebih pendek dan ini tentu saja juga ketika kami ingin menghindari bahwa formulir dikirimkan. 124 00:10:18,300 --> 00:10:23,450 Namun, jika formulir dikirimkan, uraian judul dan imageUrl, yang sudah tidak ada, 125 00:10:23,550 --> 00:10:29,380 alih-alih itu sekarang berupa status inputValues. judul dan seterusnya, jadi kami melakukan 126 00:10:29,400 --> 00:10:30,950 hal yang 127 00:10:32,290 --> 00:10:40,790 sama di sini untuk deskripsi dan untuk imageUrl. Kami memperoleh nilai-nilai kami dari bentuk 128 00:10:40,790 --> 00:10:50,250 formulir, sama tentu saja di sini untuk membuat. Kami mendapatkan judul dan deskripsi serta imageUrl dan juga tentu saja harga yang 129 00:10:50,250 --> 00:10:55,200 masih saya konversikan ke angka dengan nilai plus di sini, kami mendapatkan semua 130 00:10:55,200 --> 00:11:02,130 itu dari bentuk nilai input yang kami berikan. Oleh karena itu tentu saja ketergantungan kita di sini bukan 131 00:11:02,130 --> 00:11:08,490 judul, deskripsi, imageUrl dan sebagainya, melainkan hanya bentuk keadaan. Jika bentuk menyatakan perubahan, yang akan terjadi pada 132 00:11:08,490 --> 00:11:13,170 setiap keystroke, maka fungsi ini harus dibangun kembali dan perlu dibangun kembali karena 133 00:11:13,200 --> 00:11:14,790 informasi yang digunakan 134 00:11:14,790 --> 00:11:16,980 oleh fungsi berubah dengan setiap keystroke, 135 00:11:17,070 --> 00:11:23,750 validitas dapat berubah dengan setiap keystroke, nilai yang Anda inginkan untuk mengirim dapat berubah dengan setiap penekanan tombol. 136 00:11:23,880 --> 00:11:29,820 Kami juga tentu saja dapat sekarang menggunakan ini untuk menampilkan pesan kesalahan kami. Alih-alih memeriksa judul yang 137 00:11:29,820 --> 00:11:31,330 valid yang 138 00:11:31,380 --> 00:11:41,850 tidak ada lagi, kami memeriksa formState. inputValidities. judul, jika itu salah, maka saya ingin menunjukkan teks ini. 139 00:11:41,960 --> 00:11:42,680 Jadi sekarang dengan 140 00:11:42,680 --> 00:11:47,440 itu, jika kita menyimpan semua itu, kita harus dapat memeriksa ini. Jika kita pergi ke halaman kita di sini, 141 00:11:47,450 --> 00:11:49,320 kita melihat kesalahan ini pada awalnya. 142 00:11:49,340 --> 00:11:51,650 Jika saya mulai mengetik, itu menghilang, 143 00:11:51,690 --> 00:11:55,640 jika saya mencoba mengirimkan ini, gagal karena saya memiliki tiga input kosong. 144 00:11:55,640 --> 00:11:58,800 Jika saya memasukkan sesuatu yang valid di sana, di 145 00:11:58,850 --> 00:12:02,100 sisi lain, ini berfungsi. Jika saya mencoba mengedit, mari 146 00:12:02,270 --> 00:12:05,100 kita coba ini di Android mungkin untuk mencampuradukkan semuanya. 147 00:12:05,420 --> 00:12:11,140 Jadi jika saya mencoba mengedit baju merah di sini, saya dapat mengirimkan ini dengan 148 00:12:11,150 --> 00:12:13,290 baik, sekarang mari kita 149 00:12:13,320 --> 00:12:18,080 juga mencoba mengirimkan ini jika ini kosong, maka saya mendapatkan peringatan. 150 00:12:18,080 --> 00:12:20,620 Jadi ini berfungsi seperti seharusnya, sekarang dengan 151 00:12:24,840 --> 00:12:31,700 manajemen formulir yang lebih elegan ini menggunakan peredam penggunaan dan tentu saja Anda tidak bisa hanya menggunakan peredam penggunaan saat 152 00:12:31,700 --> 00:12:33,020 bekerja dengan formulir, 153 00:12:33,080 --> 00:12:38,660 ini hanya contoh yang sangat bagus ketika masuk akal untuk menggabungkan beberapa negara secara bersamaan dan 154 00:12:38,660 --> 00:12:42,250 karenanya memiliki kode yang sangat dapat digunakan kembali dan efisien. 155 00:12:42,270 --> 00:12:48,290 Sekarang saya masih belum selesai karena semua pengulangan kode ini dengan input di sini yang 156 00:12:48,320 --> 00:12:54,880 selalu terstruktur dengan cara yang sama dan kemungkinan kustomisasi yang hilang mengenai validasi, ini adalah hal-hal yang 157 00:12:55,040 --> 00:12:56,930 ingin saya bahas selanjutnya.