1 00:00:02,390 --> 00:00:07,550 Sekarang dengan tindakan ini sedang dikirim, kita dapat pergi ke reducer dan menulis beberapa kode di sini di input perubahan dan 2 00:00:08,170 --> 00:00:09,440 itu kode yang sangat sederhana. 3 00:00:09,440 --> 00:00:18,650 Kami mengembalikan negara baru tempat saya menyalin negara lama saya dan saya ingin memperbarui nilainya dengan tindakan. nilai karena nilai adalah satu properti yang saya miliki pada 4 00:00:19,400 --> 00:00:25,650 tindakan ini, yang lainnya adalah isValid dan itu hal lain yang saya juga ingin 5 00:00:25,650 --> 00:00:30,710 perbarui pada setiap penekanan tombol, isValid untuk input ini, bukan untuk seluruh 6 00:00:30,710 --> 00:00:38,420 formulir tetapi untuk input ini dikelola secara internal. Saya tidak akan memperbarui yang disentuh di sini, alih-alih yang disentuh 7 00:00:38,930 --> 00:00:43,490 harus diperbarui ketika kita benar-benar kehilangan fokus karena itu berarti pengguna selesai memasukkan konten untuk 8 00:00:43,490 --> 00:00:52,550 saat ini, jadi sekarang saya ingin menandainya sebagai tersentuh dan mungkin menunjukkan kesalahan validasi. Jadi di sini, kehilangan penangan fokus adalah fungsi yang 9 00:00:52,580 --> 00:00:56,690 saya tambahkan dan di sana, saya akan mengirimkan 10 00:00:59,970 --> 00:01:01,890 tindakan. Sekarang untuk 11 00:01:01,890 --> 00:01:04,470 itu, saya akan membuat pengidentifikasi tindakan 12 00:01:04,710 --> 00:01:16,170 di sini, input blur, seperti ini, input blur seperti ini dan sekarang kita dapat mengirimkan input blur di sini, tidak perlu melampirkan data apa pun dan sekarang dalam peredam 13 00:01:16,170 --> 00:01:24,060 kami, kami dapat menggunakan bahwa dengan kasus lain, masukan kabur dan jika itu yang terjadi, saya mengembalikan negara baru tempat 14 00:01:24,060 --> 00:01:29,280 saya menyalin negara lama karena saya ingin menyimpan nilai dan valid dan tidak 15 00:01:29,280 --> 00:01:36,620 mengubah itu tetapi saya ingin mengatur sentuhan ke true, jadi segera saat kita mengaburkan input, itu diperlakukan sebagai disentuh. 16 00:01:36,750 --> 00:01:44,110 Sekarang kita hanya perlu menghubungkan fungsi ini, jadi saya akan mengatur pendengar onBlur di sini dan menunjuk pada handler fokus yang hilang 17 00:01:44,110 --> 00:01:46,870 sehingga ini memicu ketika input ini kabur. 18 00:01:49,850 --> 00:01:57,100 Sekarang semuanya bagus dan ini akan mengatur keadaan di dalam input ini, tentu saja 19 00:01:57,190 --> 00:02:03,370 saya masih perlu meneruskan nilai dan informasi, apakah input itu valid atau 20 00:02:03,370 --> 00:02:14,700 tidak, kepada orang tua saya, jadi ke layar edit produk. Maka yang dapat kita lakukan adalah kita dapat menambahkan efek penggunaan di sini 21 00:02:14,700 --> 00:02:15,310 sebagai 22 00:02:18,430 --> 00:02:28,070 impor dalam komponen input dan mungkin menambahkannya di sini dan dalam fungsi efek penggunaan, saya ingin memanggil fungsi yang saya harapkan dapatkan 23 00:02:28,130 --> 00:02:40,980 melalui alat peraga, mungkin pada perubahan input, nama terserah Anda dan saya hanya akan menjalankan ini dan meneruskan nilai status input saya dan status input saya adalah informasi yang valid, 24 00:02:40,980 --> 00:02:48,540 sehingga dalam komponen induk, kita dapat menambahkan fungsi di sini yang mendengarkan pada akhirnya, yang dipicu, yang 25 00:02:48,540 --> 00:02:53,790 menerima dua argumen ini dan kemudian di induknya, jadi di komponen layar, 26 00:02:53,790 --> 00:03:00,310 kita dapat memperbarui status kita di sana. Sekarang yang penting adalah kapan harus menggunakan efek 27 00:03:00,310 --> 00:03:07,420 ini berjalan dan seharusnya tidak berjalan setelah setiap keystroke? Alih-alih, ini harus dijalankan setiap kali 28 00:03:07,420 --> 00:03:17,780 nilai status input kami atau perubahan yang valid tentu saja, karena itulah yang kami andalkan atau tepatnya, kami mungkin bahkan hanya 29 00:03:17,780 --> 00:03:25,910 mengirim informasi ini jika status input yang disentuh benar karena jika tidak komponen induk mungkin tidak peduli. 30 00:03:26,100 --> 00:03:31,680 Jadi sekarang ketergantungan kita di sini adalah seluruh kondisi input karena kita menggunakan semua nilai tetapi kita hanya 31 00:03:31,680 --> 00:03:36,600 akan menjalankan fungsi ini pada komponen induk jika disentuh benar, jadi efek ini akan berjalan lebih 32 00:03:36,600 --> 00:03:42,240 sering tetapi sebagian besar waktu itu tidak akan melakukan apa pun selama disentuh tidak benar dan alat peraga tentu 33 00:03:42,480 --> 00:03:49,170 saja juga ketergantungan kita, sekarang untuk menghindari loop rendering tak terbatas di sini, kita dapat menggunakan sintaksis objek perusak dan menarik keluar 34 00:03:49,650 --> 00:03:56,640 pada perubahan input, sehingga jika alat peraga lain berubah, kita tidak menolak efek ini karena pada perubahan input adalah apa yang kita butuhkan 35 00:03:56,640 --> 00:04:01,890 di sana dan sekarang kita dapat menambahkan ini adalah ketergantungan dan hal-hal lain, perubahan lain pada alat 36 00:04:01,890 --> 00:04:03,820 peraga tidak akan memicu ini. 37 00:04:04,260 --> 00:04:10,620 Jadi sekarang kita menyebutnya pada komponen induk setiap kali ini disentuh dan kemudian kita meneruskan nilai 38 00:04:10,650 --> 00:04:13,470 dan validitas input ini ke komponen induk. 39 00:04:16,680 --> 00:04:23,400 Jadi sekarang mari kita gunakan itu di layar edit produk, di sana pada input kita seperti pada input judul, kita dapat 40 00:04:23,400 --> 00:04:29,670 menambahkan prop pada input perubahan dan itulah prop yang saya targetkan di sini, jadi Anda harus mendapatkan penamaan itu 41 00:04:29,670 --> 00:04:34,230 dengan benar dan ini mengharapkan untuk mendapatkan fungsi sebagai nilai yang kemudian akan 42 00:04:34,230 --> 00:04:38,140 menerima dua argumen ketika dipanggil - nilai dan validitas input itu. 43 00:04:38,220 --> 00:04:44,490 Jadi di sini saya ingin menunjuk pada suatu fungsi dan itu bisa menjadi kita katakanlah input handler perubahan, kita dapat mendaur ulang 44 00:04:44,490 --> 00:04:46,910 ini, saya hanya mengubah nama menjadi lebih pas. 45 00:04:47,130 --> 00:04:55,070 Jadi pengendali perubahan input dapat dipicu di sini, seperti ini, di sana saya ingin tetap meneruskan pengenal saya karena saya ingin menggunakan 46 00:04:55,100 --> 00:04:59,930 kembali itu untuk semua input saya dan sekarang karena saya berada di komponen layar, 47 00:04:59,930 --> 00:05:07,940 kita akan memiliki beberapa input dan ada , oleh karena itu kami mendapatkan pengenal kami dan kemudian kami mendapatkan nilai dan informasi 48 00:05:07,940 --> 00:05:09,410 yang valid, kan? 49 00:05:09,410 --> 00:05:15,740 Jadi nilai input dan validitas input, itulah yang kami dapatkan, benar, karena itulah 50 00:05:15,740 --> 00:05:19,940 yang kami teruskan dari dalam komponen input di 51 00:05:19,940 --> 00:05:22,510 sini, itulah yang kami 52 00:05:22,580 --> 00:05:31,110 sampaikan ini pada fungsi perubahan input. Jadi karena itu di sini, kita tidak perlu melakukan validasi, kita hanya perlu meneruskan informasi itu. Kami meneruskan nilai input, kami meneruskan validitas input 53 00:05:31,110 --> 00:05:38,310 dan ini hanya akan terjadi ketika input disentuh oleh jalan, jadi ketika kehilangan fokus dan tentu saja itu hanya batasan 54 00:05:38,310 --> 00:05:40,320 yang saya tambahkan di 55 00:05:43,310 --> 00:05:48,010 sini, bahwa Anda harus kehilangan fokus, Anda tentu saja bisa juga pergi ke 56 00:05:48,020 --> 00:05:53,060 komponen input dan menghapus ini jika centang untuk memperbarui validitas dan nilai dalam komponen 57 00:05:53,060 --> 00:05:59,260 induk untuk setiap input, untuk setiap penekanan tombol. Sekarang satu hal tambahan yang ingin saya lakukan, saya 58 00:05:59,260 --> 00:06:07,390 ingin membungkus ini dengan menggunakan panggilan panggil balik di sini, sehingga fungsi ini tidak perlu dibangun kembali karena perlu diingat bahwa kami meneruskan 59 00:06:07,510 --> 00:06:13,050 fungsi ini pada perubahan input pada komponen input dan ada di sisi lain, ini adalah ketergantungan 60 00:06:13,060 --> 00:06:13,630 dari 61 00:06:13,630 --> 00:06:15,400 efek ini, sehingga efek 62 00:06:15,430 --> 00:06:18,190 ini akan dijalankan kembali setiap kali ini berubah. 63 00:06:18,190 --> 00:06:22,780 Jadi itu tidak boleh berubah terlalu sering untuk menghindari efek yang tidak perlu berjalan 64 00:06:22,810 --> 00:06:28,900 dan di sini karena itu kita perlu menyatakan dependensi kita dan satu-satunya dependensi yang kita miliki adalah status 65 00:06:29,080 --> 00:06:31,690 pengiriman yang sebenarnya tidak akan pernah berubah, jadi 66 00:06:31,690 --> 00:06:32,430 kita 67 00:06:32,430 --> 00:06:35,620 baik, ini tidak boleh dibangun kembali karena logika di 68 00:06:35,680 --> 00:06:43,690 sana tidak berubah, kita mendapatkan semua nilai yang kita butuhkan sebagai argumen. Dengan itu di layar edit produk saya, saya masih memiliki formulir saya yang tentu saja dengan semua nilai formulir dan validitas formulir tetapi saya hanya mengelola 69 00:06:50,310 --> 00:06:55,600 ini di sini karena saya perlu mengirimkannya nanti dan karena saya perlu memperoleh validitas formulir keseluruhan. Saya tidak melakukannya karena saya 70 00:06:55,600 --> 00:06:58,280 perlu mengelola setiap input di sini, 71 00:06:58,390 --> 00:07:05,100 kami melakukannya dari dalam komponen input saja. Untuk pengiriman dan sebagainya, 72 00:07:05,100 --> 00:07:06,460 kami 73 00:07:06,500 --> 00:07:18,810 masih membutuhkan informasi tentang setiap toko, nilainya. Sekarang jika saya kembali ke input, jangan lupa bahwa Anda juga perlu mengatur prop 74 00:07:19,320 --> 00:07:22,600 nilai awal dan apakah ini harus 75 00:07:22,680 --> 00:07:31,290 awalnya valid, jadi jika saya kembali ke layar edit produk, sekarang kita harus menetapkan nilai awal di sini untuk apa? 76 00:07:31,320 --> 00:07:35,640 Nah, kita dapat memeriksa apakah kita memiliki produk yang diedit dan jika kita lakukan, maka nilai awal di 77 00:07:35,640 --> 00:07:37,150 sini harus dieditProduk. judul, 78 00:07:37,170 --> 00:07:44,760 jika tidak, ini adalah string kosong dan ini seharusnya awalnya valid, jadi gunakan prop ini di 79 00:07:45,480 --> 00:07:47,480 sini jika kami memiliki 80 00:07:49,830 --> 00:07:51,860 produk yang diedit, jadi 81 00:07:51,870 --> 00:08:00,780 jika ini, dengan double bang di sini, jika ini benar. Jika kami tidak memiliki produk yang diedit, maka ini awalnya 82 00:08:00,780 --> 00:08:01,530 tidak 83 00:08:01,530 --> 00:08:03,390 dapat valid, maka saya 84 00:08:03,390 --> 00:08:07,210 memberikan false yang bagus, yang memang seharusnya demikian. 85 00:08:07,280 --> 00:08:13,040 Sekarang kita bisa menyalin dua baris ini, juga ke imageUrl, tentu saja kita meneruskan nilai URL 86 00:08:13,040 --> 00:08:20,400 gambar sebagai nilai default, selain itu, bisa tetap seperti ini. Untuk harga, kami tidak akan pernah memiliki nilai awal dan 87 00:08:20,400 --> 00:08:25,650 itu tidak akan pernah awalnya valid. Untuk deskripsi di sisi lain, kita dapat 88 00:08:25,660 --> 00:08:28,950 kembali menambahkan ini dan di sini arahkan ke deskripsi. 89 00:08:32,270 --> 00:08:39,050 Sekarang dengan itu, ada satu hal yang perlu saya perbaiki dalam komponen input yang juga baru saja saya pikirkan, tentu 90 00:08:39,050 --> 00:08:43,450 saja di sini, bentuk formulir tidak tersedia lagi, alih-alih kami memiliki keadaan internal 91 00:08:43,450 --> 00:08:47,950 kami di sini dan saya menamakan status masukan ini, yaitu apa peredam saya 92 00:08:47,960 --> 00:08:49,870 kembali, jadi kita harus menggunakannya 93 00:08:50,120 --> 00:08:51,700 di sini tentu saja. 94 00:08:51,700 --> 00:08:57,830 Jadi di sini kita memiliki inputState. nilai sebagai nilai, sesederhana itu dan 95 00:08:57,920 --> 00:09:03,590 di sini kita memiliki inputState. isValid sebagai cek dan itu semua. 96 00:09:03,590 --> 00:09:10,060 Sekarang jika kita menyimpan ini dan melihat ini, mari kita lihat apakah itu berhasil. Jika kita pergi ke sini, kita memiliki semua pesan 97 00:09:10,060 --> 00:09:13,360 kesalahan pada awalnya yang masuk akal karena mereka semua 98 00:09:13,790 --> 00:09:20,500 pada awalnya tidak valid, jika saya mulai mengetik di sini, saya mendapatkan kesalahan, tidak dapat menemukan variabel isValid dalam komponen 99 00:09:20,500 --> 00:09:26,910 input saya, yang harus di pawang yang menembak untuk setiap keystroke, mungkin di sini, ya di peredam tentu saja 100 00:09:26,920 --> 00:09:30,000 saya harus memeriksa tindakan. 101 00:09:30,000 --> 00:09:32,490 isValid, bukan hanya isValid, saya harus 102 00:09:32,730 --> 00:09:37,470 mendapatkan ini dari tindakan. Jadi dengan perbaikan itu di sini, 103 00:09:37,480 --> 00:09:42,240 mari kembali dan mari coba ini lagi. Jika saya mulai mengetik, ini dihapus, 104 00:09:42,270 --> 00:09:46,530 jika saya mengembalikan ini, kesalahan saya tidak kembali, jadi itu adalah sedikit 105 00:09:46,530 --> 00:09:50,800 kesalahan yang harus kami perbaiki. Untuk harga, 0 106 00:09:50,800 --> 00:09:55,330 maka tidak diperlakukan sebagai valid, satu juga tidak, jadi validasi 107 00:09:55,350 --> 00:09:58,590 memiliki beberapa masalah tetapi masuk dan sebagainya 108 00:09:58,590 --> 00:10:03,490 berfungsi tetapi mari kita lihat apa yang salah dengan validasi sekarang. 109 00:10:03,500 --> 00:10:07,090 Tentu saja cara validasi berfungsi di sini, kami tidak menggunakannya. 110 00:10:07,100 --> 00:10:12,290 Harap diingat bahwa saya selalu memeriksa apakah jenis validasi ini diaktifkan untuk input ini atau jenis ini atau jenis ini dan kami melakukan 111 00:10:12,290 --> 00:10:17,000 ini dengan bantuan alat peraga khusus yang perlu kami atur. Saat ini tidak ada 112 00:10:17,030 --> 00:10:22,980 validasi yang diaktifkan, sehingga hanya nilai-nilai tidak valid default yang diperhitungkan. 113 00:10:23,060 --> 00:10:28,610 Jadi jika saya pergi ke layar edit produk, kami sekarang mengaktifkan validasi khusus ini dengan mengatur 114 00:10:28,610 --> 00:10:39,170 properti yang tepat, misalnya di sini pada input judul, diperlukan. Pada imageUrl, juga diperlukan. Pada harga di sini, diperlukan dan mungkin 115 00:10:39,470 --> 00:10:47,540 juga min sama dengan nol, sehingga nol adalah angka minimum yang harus kita masukkan atau angka yang 116 00:10:47,540 --> 00:10:48,350 lebih 117 00:10:48,380 --> 00:10:58,480 besar dari yang sebenarnya, jadi mungkin 0. 1 adalah angka minimum kami. Untuk uraian, harus juga diperlukan dan mungkin juga panjang minimum 118 00:10:58,540 --> 00:11:05,100 sama dengan 5, untuk memiliki setidaknya 5 karakter. Ada juga satu hal tambahan yang perlu kita lakukan di 119 00:11:05,100 --> 00:11:11,070 sini di layar edit produk, ini pada input handler perubahan di sini juga perlu ditambahkan ke setiap input 120 00:11:11,130 --> 00:11:16,870 tentu saja, tidak hanya untuk input judul. Jadi kita perlu menambahkan ini untuk 121 00:11:16,870 --> 00:11:26,760 imageUrl, jika tidak kita akan mendapatkan kesalahan nanti, kita perlu menambahkan ini di sini ke input harga, kita juga perlu menambahkan ini di sini jelas 122 00:11:26,760 --> 00:11:30,580 ke input deskripsi dan mengganti pengenal dengan cara yang benar. 123 00:11:32,810 --> 00:11:36,010 Jadi mari kita coba ini dan Anda akan melihat 124 00:11:36,040 --> 00:11:39,000 sesuatu yang aneh, jika Anda mengetik di sini, itu 125 00:11:39,000 --> 00:11:41,210 berfungsi, jika Anda mengetik di 126 00:11:41,220 --> 00:11:47,300 imageUrl, tidak berfungsi dengan benar, validasinya tidak diperbarui dan Anda tidak dapat kembali juga, setidaknya ini mungkin macet. 127 00:11:47,310 --> 00:11:54,990 Jadi, jika kita memuat ulang ini dengan kesalahan perintah atau menekan dua kali R pada Android dan kami coba 128 00:11:55,010 --> 00:12:00,950 lagi di sini, katakanlah pada harga Anda akan melihat ini bekerja tetapi mengapa tidak 129 00:12:00,950 --> 00:12:05,630 bekerja dan hal yang sama akan terjadi dengan cara jika Anda 130 00:12:05,670 --> 00:12:10,200 mencobanya di imageUrl, ini berfungsi. Mengapa ini bekerja jika saya sebelumnya mengedit input 131 00:12:10,200 --> 00:12:15,100 lain karena sekarang misalnya, tidak berfungsi pada judul lagi? Dan masalahnya terkait dengan ini terjebak di sini. 132 00:12:15,390 --> 00:12:22,500 Kami terlalu sering merender komponen ini dan alasannya sangat sulit untuk dilacak. 133 00:12:23,010 --> 00:12:24,980 Pada akhirnya, kami memiliki semacam loop tak 134 00:12:24,990 --> 00:12:27,290 terbatas di sini dan masalahnya adalah handler perubahan input kami. 135 00:12:27,420 --> 00:12:34,290 Kami menggunakan panggilan balik di sini untuk menghindari rekreasi yang tidak perlu, tetapi dengan mengikatnya seperti ini, 136 00:12:34,290 --> 00:12:40,710 kami membuat ini usang, tidak ada bedanya sekarang karena ini akan membuat fungsi baru mengikat untuk 137 00:12:40,800 --> 00:12:42,230 setiap siklus rerender. 138 00:12:42,750 --> 00:12:49,590 Jadi pada akhirnya yang harus kita lakukan adalah kita harus menghapus bind di sini, menghapusnya di sini 139 00:12:49,590 --> 00:12:51,550 di semua tempat ini 140 00:12:51,780 --> 00:12:56,980 karena ini akan merusak aplikasi kita, itu akan menyebabkan siklus rerender terlalu banyak 141 00:12:57,210 --> 00:13:01,200 karena penggunaan panggilan balik tidak memiliki efek dan sebaliknya kita 142 00:13:01,200 --> 00:13:05,850 mungkin ingin meneruskan prop judul ID dan seterusnya ke komponen input kami. 143 00:13:06,050 --> 00:13:14,200 Jadi mari kita tambahkan ini pada semua input ini, ID prop ini pada dasarnya adalah apa yang saya tambahkan dalam bind call sebelumnya, jadi kami 144 00:13:14,260 --> 00:13:18,860 hanya meneruskan ini ke komponen input sehingga kita dapat menggunakannya di sana, mari kita lakukan 145 00:13:18,880 --> 00:13:23,430 ini untuk semua input ini di sini dan sekarang bagaimana kita bisa menggunakannya? 146 00:13:23,470 --> 00:13:27,910 Di dalam input, kami sekarang memiliki ID prop yang tersedia, jadi 147 00:13:27,910 --> 00:13:30,820 di sana kami dapat melampirkan ini. 148 00:13:30,880 --> 00:13:38,280 Jadi di sini kita dapat meneruskan alat peraga. id atau cukup ID sehingga kita tidak perlu menambahkan alat peraga di 149 00:13:38,280 --> 00:13:44,370 sini dan sebagai gantinya menarik keluar ID dari alat peraga di sini seperti yang kita lakukan dengan perubahan input dan 150 00:13:44,470 --> 00:13:50,470 menambahkan ID sebagai ketergantungan dari efek ini sesudahnya. Dan sekarang dengan itu, kami masih meneruskan pengidentifikasi 151 00:13:50,830 --> 00:13:55,630 input ini tetapi dengan cara yang lebih elegan yang menghindari penggunaan bind yang pada akhirnya 152 00:13:55,630 --> 00:13:59,000 menciptakan kembali fungsi ini untuk setiap siklus render dan karenanya 153 00:13:59,140 --> 00:14:03,430 mengarah ke loop tak terbatas dan oleh karena itu sekarang jika kita memuat ulang 154 00:14:06,890 --> 00:14:15,490 ini dan kami buka bagian admin di sini, sekarang saya dapat memasukkan sesuatu di sini dan juga di sini dan sekarang ini berfungsi karena sekarang kita menghindari 155 00:14:15,490 --> 00:14:19,660 siklus render tak terbatas ini dan kami mendapatkan validasinya seperti yang kami inginkan. 156 00:14:19,690 --> 00:14:26,170 Jadi sekarang ini pendekatan saya atau ini pendekatan yang ingin saya tunjukkan di sini, yang dapat Anda gunakan untuk memiliki komponen 157 00:14:26,170 --> 00:14:31,630 input yang dapat digunakan kembali yang melakukan validasinya sendiri, yang dapat Anda konfigurasikan dari luar dan di 158 00:14:31,630 --> 00:14:33,960 mana Anda masih dapat mengelola formulir keseluruhan. 159 00:14:34,060 --> 00:14:36,120 Dengan itu, mari selami beberapa 160 00:14:36,220 --> 00:14:42,070 finetuning, seperti misalnya menata pesan kesalahan yang kami tampilkan ini, pesan kesalahan validasi ini dan juga mengendalikan 161 00:14:42,070 --> 00:14:45,310 ketika kami menampilkannya karena saya tidak ingin menunjukkannya sepanjang waktu.