1 00:00:02,530 --> 00:00:05,110 Jadi bagaimana lagi kita bisa mengoptimalkan ini? 2 00:00:05,110 --> 00:00:11,350 Yah Anda mungkin memperhatikan bahwa kode JSX ini di sini pada akhirnya dapat diulang berulang kali, setiap input 3 00:00:11,360 --> 00:00:12,590 terlihat seperti ini. 4 00:00:12,640 --> 00:00:18,130 Kami memiliki pandangan, kami memiliki label dengan input teks itu sendiri dan kami mungkin juga ingin beberapa teks kesalahan yang 5 00:00:18,130 --> 00:00:19,140 dapat kami tampilkan. 6 00:00:19,270 --> 00:00:22,900 Jadi masuk akal untuk melakukan outsourcing ini ke komponen yang terpisah 7 00:00:22,990 --> 00:00:25,370 dan itulah yang ingin saya lakukan. 8 00:00:25,480 --> 00:00:32,230 Saya akan pergi ke folder komponen saya dan di sana di folder UI, saya akan menambahkan input. File js yang akan menyimpan komponen Bereaksi, jadi saya 9 00:00:32,230 --> 00:00:38,410 mengimpor reaksi dari reaksi tentu saja dan kemudian mengimpor beberapa hal dari Bereaksi Asli dan 10 00:00:38,410 --> 00:00:45,460 hal-hal ini pada akhirnya adalah pandangan saya, komponen teks, komponen input teks dan stylesheet karena saya ' Saya 11 00:00:45,460 --> 00:00:54,210 akan membutuhkan ini juga dari React Native dan dengan itu di sini, kita dapat membuat komponen input di sini yang mendapatkan alat peraga 12 00:00:54,210 --> 00:01:01,410 dan perlu mengembalikan beberapa jsx. Kami akan memiliki objek gaya dengan Stylesheet. buat dan tentu saja 13 00:01:02,780 --> 00:01:08,230 pada akhirnya, kami mengekspor ini sebagai default di sini, komponen ini. 14 00:01:08,340 --> 00:01:18,420 Sekarang jika kita kembali ke layar edit produk, kita dapat memotong kode jsx judul ini, sehingga tampilan di sekitarnya, teks, input teks dan bagian 15 00:01:18,440 --> 00:01:23,890 pesan kesalahan ini, hilangkan dari sini, keluar dari layar edit produk dan 16 00:01:24,250 --> 00:01:32,700 pindah yang masuk ke layar input dan di sana, gunakan itu sebagai nilai balik di komponen input di sini. 17 00:01:32,740 --> 00:01:37,210 Sekarang tentu saja, kita perlu sedikit menyesuaikan ini tapi itu kerangka umum kita yang ingin saya gunakan di 18 00:01:37,210 --> 00:01:37,720 sana. 19 00:01:37,960 --> 00:01:42,720 Sekarang juga dari layar edit produk, saya akan 20 00:01:42,770 --> 00:01:49,270 mengambil styling, ada label kontrol bentuk dan styling input ini semua dapat 21 00:01:49,270 --> 00:01:55,440 dihapus dan harus dipindahkan ke komponen input dan ada ke dalam stylesheet. 22 00:01:55,460 --> 00:02:00,740 Jadi sekarang dengan itu tentu saja, ini hanya dapat digunakan untuk judul dan saya ingin membuat 23 00:02:00,740 --> 00:02:07,580 komponen input yang dapat digunakan untuk input apa pun, yang misalnya berarti bahwa label di sini harus dinamis, jadi saya akan 24 00:02:07,710 --> 00:02:10,830 berharap untuk mendapatkan ini pada label bernama prop mungkin. 25 00:02:13,740 --> 00:02:18,420 Saya juga secara umum ingin memastikan bahwa input teks dapat dikonfigurasi dari luar, jadi 26 00:02:18,420 --> 00:02:25,800 saya akan meneruskan semua alat peraga yang saya dapatkan pada komponen input saya di sini ke input teks, sehingga pada komponen input 27 00:02:25,800 --> 00:02:31,060 ini, kita akan dapat mengatur hal-hal seperti jenis keyboard karena saya tidak ingin hardcode ini di 28 00:02:31,070 --> 00:02:31,570 sini, 29 00:02:31,570 --> 00:02:36,720 alih-alih ini harus menjadi pembungkus dapat digunakan kembali di sekitar komponen input teks yang dapat dikonfigurasi 30 00:02:36,720 --> 00:02:37,570 dari luar. 31 00:02:37,800 --> 00:02:43,990 Jadi pengaturan ini di sini misalnya, saya akan memotongnya dari sini sehingga kita dapat mengaturnya dari luar, saya juga akan 32 00:02:44,010 --> 00:02:46,530 menyingkirkan pendengar ini karena kita tidak benar-benar membutuhkannya. 33 00:02:52,130 --> 00:02:57,230 Teks kesalahan di sini juga harus dapat diselesaikan dari luar, jadi saya akan memeriksa teks kesalahan alat 34 00:02:57,230 --> 00:02:58,640 peraga di sini dan tentu 35 00:02:58,640 --> 00:03:02,720 saja Anda dapat selalu memberikan alat peraga ini nama yang Anda inginkan, tentu 36 00:03:02,720 --> 00:03:07,570 saja kami juga harus mengubah apa yang kami tetapkan di sini sebagai nilai dan sebagainya, itu 37 00:03:07,570 --> 00:03:08,800 juga akan berubah. 38 00:03:09,350 --> 00:03:11,720 Tapi sekarang kita sudah dapat mulai menggunakan 39 00:03:11,720 --> 00:03:23,200 input itu di sini, mari kita pergi ke layar edit produk dan di sana, saya hanya akan pergi ke atas dan mengimpor input dari folder komponen tentu saja dan di sana dari 40 00:03:23,200 --> 00:03:27,210 folder UI dan di sana dari input dan kemudian kita dapat 41 00:03:27,550 --> 00:03:32,770 mulai menggunakan komponen input di tempat di mana saya sebelumnya memiliki komponen input teks saya 42 00:03:32,770 --> 00:03:33,910 di sini. 43 00:03:34,000 --> 00:03:40,510 Jadi di sana, saya hanya akan menambahkan input dan sekarang pada input, kita dapat menambahkan pengaturan yang saya potong, seperti jenis 44 00:03:40,510 --> 00:03:43,000 keyboard dan sebagainya karena itu akan diteruskan. 45 00:03:43,180 --> 00:03:50,950 Kami dapat mengatur label judul kami, seperti judul dan juga teks kesalahan kami yang mungkin seperti Silakan masukkan judul yang valid, meskipun itu 46 00:03:51,550 --> 00:03:55,470 tidak semua kami akan lakukan mengenai validasi tetapi ini adalah permulaan. 47 00:03:55,510 --> 00:03:57,250 Ini adalah bagaimana kita kemudian dapat menggunakan 48 00:03:59,130 --> 00:04:02,970 input ini dan tentu saja ini juga bagaimana kita sekarang dapat menggunakannya untuk mengganti input lainnya. 49 00:04:02,970 --> 00:04:11,400 Jadi misalnya di sini, imageUrl, di sini saya mengatur ini ke imageUrl, Silakan masukkan imageUrl yang valid mungkin, jenis keyboard default 50 00:04:11,400 --> 00:04:17,910 tidak apa-apa, koreksi huruf besar otomatis kapitalisasi tidak diperlukan, kembalikan jenis kunci berikutnya kita dapat meninggalkan 51 00:04:17,910 --> 00:04:18,480 itu, 52 00:04:18,480 --> 00:04:23,070 kita tidak melakukan apa pun dengan itu, kita bisa menambahkan beberapa 53 00:04:23,070 --> 00:04:29,990 logika tetapi saya tidak melakukannya di sini. Untuk harga saya akan meninggalkan rendering bersyarat tetapi di sana, 54 00:04:33,510 --> 00:04:42,300 saya dapat menambahkan input saya di sini, setel ini untuk harga, silakan masukkan harga yang valid, jenis keyboard di sini tentu saja tidak boleh default tetapi pad desimal, 55 00:04:42,330 --> 00:04:49,380 tidak perlu kapitalisasi otomatis atau koreksi otomatis jadi mari kita singkirkan itu. Dan untuk deskripsi di sini, saya juga 56 00:04:49,380 --> 00:04:58,740 akan menambahkan input saya di sini, deskripsi, silakan masukkan deskripsi yang valid, jenis keyboard dapat menjadi default, saya dapat 57 00:04:58,980 --> 00:05:05,700 menggunakan kapitalisasi otomatis, koreksi otomatis, namun saya tidak akan menetapkan jenis kunci kembali tetapi 58 00:05:05,700 --> 00:05:14,330 di sini Saya ingin mengatur multiline seperti ini yang memungkinkan untuk mengedit multiline dan mengatur jumlah baris untuk 59 00:05:14,330 --> 00:05:15,830 katakanlah tiga. 60 00:05:15,830 --> 00:05:20,630 Namun ini hanya digunakan oleh Android tetapi di sana, itu akan membatasi jumlah baris yang dapat 61 00:05:20,630 --> 00:05:25,580 Anda masukkan, di iOS, ini tidak akan berpengaruh tetapi ini adalah bagaimana Anda sekarang dapat menggunakan komponen input 62 00:05:25,580 --> 00:05:27,470 ini dan masih mengkonfigurasinya dari luar. 63 00:05:27,470 --> 00:05:30,240 Yang sedang berkata, seperti yang saya 64 00:05:30,260 --> 00:05:35,710 katakan kita belum selesai, bagaimana dengan nilai dan pendengar teks perubahan ini? 65 00:05:35,840 --> 00:05:42,030 Ada berbagai cara bagaimana Anda dapat menangani input teks ini atau nilai teks di sini. 66 00:05:42,050 --> 00:05:47,960 Anda masih bisa meneruskannya ke komponen induk dan hanya menggunakan komponen input ini sebagai pembungkus visual tapi 67 00:05:48,080 --> 00:05:49,020 saya akan 68 00:05:49,310 --> 00:05:55,850 membawanya sedikit lebih jauh dan saya ingin mengelola nilai ini dan validitas input tunggal ini di dalam komponen input, 69 00:05:56,180 --> 00:05:58,460 sehingga Saya kemudian hanya melaporkan kembali 70 00:05:58,460 --> 00:06:05,280 ke komponen induk saya, jadi ke layar edit produk pada akhirnya apa nilai saat ini dan apakah itu valid atau 71 00:06:05,280 --> 00:06:07,900 tidak sehingga validasi tidak perlu terjadi di 72 00:06:07,940 --> 00:06:11,980 dalam komponen induk tetapi sekali lagi itu benar-benar naik kepada Anda 73 00:06:12,170 --> 00:06:17,480 apakah Anda ingin melakukan itu atau tidak. Di sini saya akan menambahkan konstanta baru 74 00:06:17,480 --> 00:06:25,520 dalam komponen input, penangan perubahan teks tempat saya mendapatkan teks masukan ini karena itulah yang saya ikat sekarang atau apa 75 00:06:25,550 --> 00:06:31,400 yang sudah diikat dan saya biasanya akan menyimpannya seperti ini, meskipun kita tidak memerlukan 76 00:06:31,400 --> 00:06:33,380 pengenal di sini lagi, karena 77 00:06:33,620 --> 00:06:39,560 itu tidak perlu diikat karena ini ada di dalam satu input, kita tidak perlu pengenal 78 00:06:39,560 --> 00:06:40,810 di sana. 79 00:06:40,880 --> 00:06:44,150 Ini karena itu sekarang akan memicu pada setiap keystroke 80 00:06:44,150 --> 00:06:56,140 dan karenanya sekarang di sini, saya ingin memeriksa apakah ini valid atau tidak dan juga mengelola nilai input saya. Sekarang untuk itu, kita dapat kembali menggunakan peredam atau kondisi individual yang dikelola 81 00:06:56,140 --> 00:07:02,270 dengan kondisi penggunaan atau dibuat dengan kondisi penggunaan, tetapi saya akan menggunakan peredam dan 82 00:07:02,300 --> 00:07:03,920 di sini saya 83 00:07:04,090 --> 00:07:12,300 memiliki peredam input saya, nama terserah Anda, mendapat status, mendapat status, mendapat tindakan dan mengembalikan negara baru pada 84 00:07:12,300 --> 00:07:13,110 akhirnya. 85 00:07:13,440 --> 00:07:20,390 Kemudian di sini ke input, saya bisa memanggil menggunakan reducer dan meneruskan atau mengatur ini ke reducer input dan keadaan awal saya untuk 86 00:07:20,550 --> 00:07:28,200 input ini di sini akan menjadi objek Javascript sederhana dengan tiga nilai. Nilai yang Anda miliki saat ini, yang awalnya bisa kosong 87 00:07:28,260 --> 00:07:34,470 tetapi sebenarnya saya ingin membiarkan diri saya untuk menetapkan nilai awal dari luar karena kita akan 88 00:07:34,470 --> 00:07:37,230 membutuhkan ini, misalnya ketika kita sedang mengedit 89 00:07:37,260 --> 00:07:41,570 produk, jadi saya memeriksa apakah alat peraga nilai awal ditetapkan , 90 00:07:41,610 --> 00:07:43,700 sekali lagi ini tentu saja 91 00:07:43,700 --> 00:07:46,980 sebuah nama yang dapat Anda pilih sesuka Anda 92 00:07:46,980 --> 00:07:49,220 dan jika ini masalahnya, saya akan 93 00:07:49,230 --> 00:07:50,040 mengatur 94 00:07:50,130 --> 00:07:53,460 ini untuk mendukung nilai awal, jika tidak saya akan 95 00:07:53,460 --> 00:08:03,600 menetapkan untuk menetapkan ini ke string kosong, maka saya juga akan mengelola apakah ini valid atau tidak dan di sana lagi saya dapat memeriksa apakah alat peraga 96 00:08:03,630 --> 00:08:05,160 awalnya valid katakanlah diatur. 97 00:08:05,160 --> 00:08:08,780 Jika itu masalahnya, maka saya akan secara otomatis mengambil nilai 98 00:08:08,790 --> 00:08:11,750 yang seharusnya benar atau salah, jika bukan 99 00:08:13,420 --> 00:08:16,440 itu masalahnya, ini akan secara otomatis dianggap salah dan 100 00:08:16,450 --> 00:08:23,170 saya juga akan mengatur apakah ini sudah disentuh atau belum, jadi apakah pengguna benar-benar mengetik di sini dan ini 101 00:08:23,260 --> 00:08:26,850 dapat berguna untuk membantu kami dengan memberikan pengalaman pengguna yang 102 00:08:27,100 --> 00:08:33,760 lebih baik mengenai ketika kami menunjukkan kesalahan validasi dan di sini saya akan menetapkan ini sebagai false pada awalnya. 103 00:08:33,780 --> 00:08:40,260 Sekarang tentu saja, ini akan mengembalikan kita snapshot keadaan input dan fungsi pengiriman yang saya 104 00:08:40,260 --> 00:08:46,920 di sini juga dapat nama pengiriman karena kita tidak akan memiliki nama bentrokan dan dalam 105 00:08:46,920 --> 00:08:54,420 penangan perubahan teks, tentu saja saya akan mengirimkan tindakan, tindakan yang saya karena itu akan membuat di 106 00:08:54,420 --> 00:09:00,040 sini dengan pengidentifikasi tindakan, perubahan input misalnya, yang harus dikirim di sini, ketik 107 00:09:00,040 --> 00:09:08,930 perubahan input dan kemudian di sini di peredam, kita dapat menambahkan pernyataan beralih untuk mencampuradukkan, memeriksa jenis tindakan dan untuk perubahan 108 00:09:08,960 --> 00:09:16,150 input kasus , kami ingin melakukan sesuatu. Dalam kasus default, saya hanya akan mengembalikan keadaan saya, 109 00:09:16,190 --> 00:09:22,400 jadi saya tidak akan melakukan apa pun tetapi di sini tentu saja, saya ingin melakukan sesuatu yang lain. 110 00:09:22,630 --> 00:09:27,730 Sekarang di sini di penangan perubahan teks, jelas saya mengirim perubahan input dan saya ingin meneruskan 111 00:09:27,760 --> 00:09:29,320 nilai yang saya simpan 112 00:09:29,410 --> 00:09:35,320 di kunci nilai tetapi sekarang di sini, saya juga ingin melakukan input validasi spesifik dan meneruskan informasi apakah 113 00:09:35,350 --> 00:09:39,550 input tersebut valid atau tidak . Dan untuk ini, terlampir Anda 114 00:09:39,570 --> 00:09:45,040 menemukan beberapa pengaturan validasi atau beberapa kode validasi yang sekarang saya akan memandu Anda. 115 00:09:45,210 --> 00:09:50,760 Di sini saya memiliki konstanta yang mengatur ekspresi reguler email, jadi ekspresi reguler yang memungkinkan kami 116 00:09:50,760 --> 00:09:52,710 untuk memvalidasi alamat email, kami 117 00:09:52,710 --> 00:09:58,290 belum memiliki input alamat email tetapi kemudian ketika kami menambahkan otentikasi, kami akan memiliki itu dan 118 00:09:58,290 --> 00:10:00,670 kemudian saya ingin dapat untuk menggunakan komponen 119 00:10:00,780 --> 00:10:04,580 input ini, maka komponen ini harus disiapkan untuk juga memvalidasi email. 120 00:10:04,740 --> 00:10:10,140 Maka saya memiliki variabel pembantu yang valid di sini karena kami memiliki banyak cek di sini. 121 00:10:10,140 --> 00:10:16,610 Sekarang saya ingin memastikan bahwa kita dapat menetapkan kriteria yang ingin kita gunakan dari luar dengan bantuan alat peraga, jadi misalnya saya memeriksa 122 00:10:16,620 --> 00:10:21,030 apakah alat peraga yang diperlukan diatur, jika itu disetel ke true, jadi jika disetel sama sekali 123 00:10:21,030 --> 00:10:26,610 dan jika itu masalahnya, maka pemeriksaan ini akan dilakukan. Jika prop yang diperlukan tidak disetel, pemeriksaan ini tidak 124 00:10:26,610 --> 00:10:31,620 akan dilakukan dan oleh karena itu validasi ini tidak dilakukan dan itu berlaku untuk semua 125 00:10:31,620 --> 00:10:33,870 validasi saya yang berbeda di sini. 126 00:10:34,080 --> 00:10:40,180 Jadi kita dapat mengatur prop yang diperlukan untuk memeriksa apakah itu tidak kosong, jika itu kosong, kita atur valid ke false. 127 00:10:40,440 --> 00:10:46,140 Kami dapat mengatur prop email pada komponen input untuk memvalidasi itu sebagai alamat email yang valid dan jika 128 00:10:46,320 --> 00:10:48,330 tidak, kami setel ke false. 129 00:10:48,450 --> 00:10:55,260 Kita dapat memeriksa nomor karena terlalu kecil atau terlalu besar atau string terlalu pendek dengan validator 130 00:10:55,260 --> 00:10:56,070 panjang 131 00:10:56,070 --> 00:11:01,950 min dan tentu saja Anda dapat menambahkan lebih banyak logika di sini, mungkin juga 132 00:11:01,950 --> 00:11:09,800 dengan paket seperti ValidateJs yang sudah saya sebutkan sebelumnya. Sekarang dengan itu, saya akan memiliki valid pada akhirnya yang benar secara 133 00:11:09,940 --> 00:11:16,520 default tetapi salah segera setelah satu validasi gagal dan karena itu sekarang, kita dapat menambahkan valid untuk tindakan yang dikirim ini 134 00:11:16,520 --> 00:11:17,060 juga.