Jadi bagaimana lagi kita bisa mengoptimalkan ini?
Yah Anda mungkin memperhatikan bahwa kode JSX ini di sini pada akhirnya dapat diulang berulang kali, setiap input
terlihat seperti ini.
Kami memiliki pandangan, kami memiliki label dengan input teks itu sendiri dan kami mungkin juga ingin beberapa teks kesalahan yang
dapat kami tampilkan.
Jadi masuk akal untuk melakukan outsourcing ini ke komponen yang terpisah
dan itulah yang ingin saya lakukan.
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
mengimpor reaksi dari reaksi tentu saja dan kemudian mengimpor beberapa hal dari Bereaksi Asli dan
hal-hal ini pada akhirnya adalah pandangan saya, komponen teks, komponen input teks dan stylesheet karena saya ' Saya
akan membutuhkan ini juga dari React Native dan dengan itu di sini, kita dapat membuat komponen input di sini yang mendapatkan alat peraga
dan perlu mengembalikan beberapa jsx. Kami akan memiliki objek gaya dengan Stylesheet. buat dan tentu saja
pada akhirnya, kami mengekspor ini sebagai default di sini, komponen ini.
Sekarang jika kita kembali ke layar edit produk, kita dapat memotong kode jsx judul ini, sehingga tampilan di sekitarnya, teks, input teks dan bagian
pesan kesalahan ini, hilangkan dari sini, keluar dari layar edit produk dan
pindah yang masuk ke layar input dan di sana, gunakan itu sebagai nilai balik di komponen input di sini.
Sekarang tentu saja, kita perlu sedikit menyesuaikan ini tapi itu kerangka umum kita yang ingin saya gunakan di
sana.
Sekarang juga dari layar edit produk, saya akan
mengambil styling, ada label kontrol bentuk dan styling input ini semua dapat
dihapus dan harus dipindahkan ke komponen input dan ada ke dalam stylesheet.
Jadi sekarang dengan itu tentu saja, ini hanya dapat digunakan untuk judul dan saya ingin membuat
komponen input yang dapat digunakan untuk input apa pun, yang misalnya berarti bahwa label di sini harus dinamis, jadi saya akan
berharap untuk mendapatkan ini pada label bernama prop mungkin.
Saya juga secara umum ingin memastikan bahwa input teks dapat dikonfigurasi dari luar, jadi
saya akan meneruskan semua alat peraga yang saya dapatkan pada komponen input saya di sini ke input teks, sehingga pada komponen input
ini, kita akan dapat mengatur hal-hal seperti jenis keyboard karena saya tidak ingin hardcode ini di
sini,
alih-alih ini harus menjadi pembungkus dapat digunakan kembali di sekitar komponen input teks yang dapat dikonfigurasi
dari luar.
Jadi pengaturan ini di sini misalnya, saya akan memotongnya dari sini sehingga kita dapat mengaturnya dari luar, saya juga akan
menyingkirkan pendengar ini karena kita tidak benar-benar membutuhkannya.
Teks kesalahan di sini juga harus dapat diselesaikan dari luar, jadi saya akan memeriksa teks kesalahan alat
peraga di sini dan tentu
saja Anda dapat selalu memberikan alat peraga ini nama yang Anda inginkan, tentu
saja kami juga harus mengubah apa yang kami tetapkan di sini sebagai nilai dan sebagainya, itu
juga akan berubah.
Tapi sekarang kita sudah dapat mulai menggunakan
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
folder UI dan di sana dari input dan kemudian kita dapat
mulai menggunakan komponen input di tempat di mana saya sebelumnya memiliki komponen input teks saya
di sini.
Jadi di sana, saya hanya akan menambahkan input dan sekarang pada input, kita dapat menambahkan pengaturan yang saya potong, seperti jenis
keyboard dan sebagainya karena itu akan diteruskan.
Kami dapat mengatur label judul kami, seperti judul dan juga teks kesalahan kami yang mungkin seperti Silakan masukkan judul yang valid, meskipun itu
tidak semua kami akan lakukan mengenai validasi tetapi ini adalah permulaan.
Ini adalah bagaimana kita kemudian dapat menggunakan
input ini dan tentu saja ini juga bagaimana kita sekarang dapat menggunakannya untuk mengganti input lainnya.
Jadi misalnya di sini, imageUrl, di sini saya mengatur ini ke imageUrl, Silakan masukkan imageUrl yang valid mungkin, jenis keyboard default
tidak apa-apa, koreksi huruf besar otomatis kapitalisasi tidak diperlukan, kembalikan jenis kunci berikutnya kita dapat meninggalkan
itu,
kita tidak melakukan apa pun dengan itu, kita bisa menambahkan beberapa
logika tetapi saya tidak melakukannya di sini. Untuk harga saya akan meninggalkan rendering bersyarat tetapi di sana,
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,
tidak perlu kapitalisasi otomatis atau koreksi otomatis jadi mari kita singkirkan itu. Dan untuk deskripsi di sini, saya juga
akan menambahkan input saya di sini, deskripsi, silakan masukkan deskripsi yang valid, jenis keyboard dapat menjadi default, saya dapat
menggunakan kapitalisasi otomatis, koreksi otomatis, namun saya tidak akan menetapkan jenis kunci kembali tetapi
di sini Saya ingin mengatur multiline seperti ini yang memungkinkan untuk mengedit multiline dan mengatur jumlah baris untuk
katakanlah tiga.
Namun ini hanya digunakan oleh Android tetapi di sana, itu akan membatasi jumlah baris yang dapat
Anda masukkan, di iOS, ini tidak akan berpengaruh tetapi ini adalah bagaimana Anda sekarang dapat menggunakan komponen input
ini dan masih mengkonfigurasinya dari luar.
Yang sedang berkata, seperti yang saya
katakan kita belum selesai, bagaimana dengan nilai dan pendengar teks perubahan ini?
Ada berbagai cara bagaimana Anda dapat menangani input teks ini atau nilai teks di sini.
Anda masih bisa meneruskannya ke komponen induk dan hanya menggunakan komponen input ini sebagai pembungkus visual tapi
saya akan
membawanya sedikit lebih jauh dan saya ingin mengelola nilai ini dan validitas input tunggal ini di dalam komponen input,
sehingga Saya kemudian hanya melaporkan kembali
ke komponen induk saya, jadi ke layar edit produk pada akhirnya apa nilai saat ini dan apakah itu valid atau
tidak sehingga validasi tidak perlu terjadi di
dalam komponen induk tetapi sekali lagi itu benar-benar naik kepada Anda
apakah Anda ingin melakukan itu atau tidak. Di sini saya akan menambahkan konstanta baru
dalam komponen input, penangan perubahan teks tempat saya mendapatkan teks masukan ini karena itulah yang saya ikat sekarang atau apa
yang sudah diikat dan saya biasanya akan menyimpannya seperti ini, meskipun kita tidak memerlukan
pengenal di sini lagi, karena
itu tidak perlu diikat karena ini ada di dalam satu input, kita tidak perlu pengenal
di sana.
Ini karena itu sekarang akan memicu pada setiap keystroke
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
dengan kondisi penggunaan atau dibuat dengan kondisi penggunaan, tetapi saya akan menggunakan peredam dan
di sini saya
memiliki peredam input saya, nama terserah Anda, mendapat status, mendapat status, mendapat tindakan dan mengembalikan negara baru pada
akhirnya.
Kemudian di sini ke input, saya bisa memanggil menggunakan reducer dan meneruskan atau mengatur ini ke reducer input dan keadaan awal saya untuk
input ini di sini akan menjadi objek Javascript sederhana dengan tiga nilai. Nilai yang Anda miliki saat ini, yang awalnya bisa kosong
tetapi sebenarnya saya ingin membiarkan diri saya untuk menetapkan nilai awal dari luar karena kita akan
membutuhkan ini, misalnya ketika kita sedang mengedit
produk, jadi saya memeriksa apakah alat peraga nilai awal ditetapkan ,
sekali lagi ini tentu saja
sebuah nama yang dapat Anda pilih sesuka Anda
dan jika ini masalahnya, saya akan
mengatur
ini untuk mendukung nilai awal, jika tidak saya akan
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
awalnya valid katakanlah diatur.
Jika itu masalahnya, maka saya akan secara otomatis mengambil nilai
yang seharusnya benar atau salah, jika bukan
itu masalahnya, ini akan secara otomatis dianggap salah dan
saya juga akan mengatur apakah ini sudah disentuh atau belum, jadi apakah pengguna benar-benar mengetik di sini dan ini
dapat berguna untuk membantu kami dengan memberikan pengalaman pengguna yang
lebih baik mengenai ketika kami menunjukkan kesalahan validasi dan di sini saya akan menetapkan ini sebagai false pada awalnya.
Sekarang tentu saja, ini akan mengembalikan kita snapshot keadaan input dan fungsi pengiriman yang saya
di sini juga dapat nama pengiriman karena kita tidak akan memiliki nama bentrokan dan dalam
penangan perubahan teks, tentu saja saya akan mengirimkan tindakan, tindakan yang saya karena itu akan membuat di
sini dengan pengidentifikasi tindakan, perubahan input misalnya, yang harus dikirim di sini, ketik
perubahan input dan kemudian di sini di peredam, kita dapat menambahkan pernyataan beralih untuk mencampuradukkan, memeriksa jenis tindakan dan untuk perubahan
input kasus , kami ingin melakukan sesuatu. Dalam kasus default, saya hanya akan mengembalikan keadaan saya,
jadi saya tidak akan melakukan apa pun tetapi di sini tentu saja, saya ingin melakukan sesuatu yang lain.
Sekarang di sini di penangan perubahan teks, jelas saya mengirim perubahan input dan saya ingin meneruskan
nilai yang saya simpan
di kunci nilai tetapi sekarang di sini, saya juga ingin melakukan input validasi spesifik dan meneruskan informasi apakah
input tersebut valid atau tidak . Dan untuk ini, terlampir Anda
menemukan beberapa pengaturan validasi atau beberapa kode validasi yang sekarang saya akan memandu Anda.
Di sini saya memiliki konstanta yang mengatur ekspresi reguler email, jadi ekspresi reguler yang memungkinkan kami
untuk memvalidasi alamat email, kami
belum memiliki input alamat email tetapi kemudian ketika kami menambahkan otentikasi, kami akan memiliki itu dan
kemudian saya ingin dapat untuk menggunakan komponen
input ini, maka komponen ini harus disiapkan untuk juga memvalidasi email.
Maka saya memiliki variabel pembantu yang valid di sini karena kami memiliki banyak cek di sini.
Sekarang saya ingin memastikan bahwa kita dapat menetapkan kriteria yang ingin kita gunakan dari luar dengan bantuan alat peraga, jadi misalnya saya memeriksa
apakah alat peraga yang diperlukan diatur, jika itu disetel ke true, jadi jika disetel sama sekali
dan jika itu masalahnya, maka pemeriksaan ini akan dilakukan. Jika prop yang diperlukan tidak disetel, pemeriksaan ini tidak
akan dilakukan dan oleh karena itu validasi ini tidak dilakukan dan itu berlaku untuk semua
validasi saya yang berbeda di sini.
Jadi kita dapat mengatur prop yang diperlukan untuk memeriksa apakah itu tidak kosong, jika itu kosong, kita atur valid ke false.
Kami dapat mengatur prop email pada komponen input untuk memvalidasi itu sebagai alamat email yang valid dan jika
tidak, kami setel ke false.
Kita dapat memeriksa nomor karena terlalu kecil atau terlalu besar atau string terlalu pendek dengan validator
panjang
min dan tentu saja Anda dapat menambahkan lebih banyak logika di sini, mungkin juga
dengan paket seperti ValidateJs yang sudah saya sebutkan sebelumnya. Sekarang dengan itu, saya akan memiliki valid pada akhirnya yang benar secara
default tetapi salah segera setelah satu validasi gagal dan karena itu sekarang, kita dapat menambahkan valid untuk tindakan yang dikirim ini
juga.