Jadi mari kita lanjutkan bekerja pada ini dan mari kita ubah ini menjadi katakanlah fungsi penangan perubahan
teks yang sekarang
kita ditugaskan untuk mengubah teks di sini pada judul tetapi yang kita juga dapat menambahkan ke imageUrl kami.
Jadi di sini untuk teks onChange, saya juga mengatur ini untuk penangan perubahan teks dan sekarang
untuk bekerja, kita perlu memastikan bahwa fungsi ini mendapatkan informasi tentang input yang dipicu,
jadi apakah Anda hanya mengetikkan judul atau di input imageUrl.
Jadi selain mendapatkan teks, saya juga berharap untuk mendapatkan argumen yang berbeda, saya
berharap untuk mendapatkan pengidentifikasi input saya atau semacamnya, Anda dapat menamainya apa pun yang Anda inginkan sehingga fungsi
ini dapat digunakan kembali untuk beberapa input teks dan kami masih mendapatkan informasi tentang input mana
yang memicu ini
sehingga kami dapat meneruskan ini ke peredam kami di mana nantinya kami membutuhkan informasi ini untuk memperbarui
keadaan kami dengan benar.
Sekarang untuk mendapatkan fungsi pengenal input ini, kita harus pergi ke tempat-tempat di mana kita menggunakan
penangan perubahan teks dan di sana, kita dapat misalnya menggunakan bind atau menggunakan fungsi panah anonim pembungkus alih-alih mengikat ini di
mana saya tidak peduli tetapi lebih penting, untuk mengkonfigurasi argumen, fungsi ini akan didapat
dan ada satu argumen khusus yang ingin saya sampaikan dan itulah pengidentifikasi input.
Dan untuk fungsi ini di sini, untuk fungsi ini memanggil
input teks ini, ini tentu saja akan menjadi judul. Untuk input ini di bawah sana, kami akan mengikat imageUrl ini
dan sekali lagi ini akan menjadi pengidentifikasi yang juga Anda miliki di negara Anda di
sana, dalam bentuk formulir yang Anda berikan ke peredam. Dengan itu ditambahkan, kami akan memastikan bahwa penangan perubahan teks dieksekusi
dan mendapatkan argumen pengidentifikasi input ini.
Argumen teks juga akan diterima karena itulah argumen default yang React Native akan
berikan kepada kami dan ini kemudian akan secara otomatis diterima sebagai argumen terakhir dalam fungsi tersebut.
Jadi kita tidak perlu dan kita sebenarnya tidak dapat mengikat ini
di sini, itu akan diteruskan secara otomatis.
Sekarang kita memiliki fungsi handler perubahan teks yang dapat digunakan kembali di sini
dan kita dapat menetapkan ini ke input lain juga, seperti di sini untuk imageUrl, seperti di sini untuk harga,
kita dapat mengikat handler perubahan teks, mengikat ini dan kemudian harga adalah pengidentifikasi kami di sini
dan tentu saja juga untuk deskripsi, di sana kami tempel ini dan kemudian ikat ke ini dan pengidentifikasi adalah deskripsi.
Sekarang pengendali yang sama ini dapat digunakan untuk semua input tetapi saat ini tentu saja,
ia melakukan satu hal, memvalidasi setiap input untuk panjangnya.
Sekarang mungkin masuk akal dan
itu ada di sini, tidak ada input yang harus kosong tetapi Anda
mungkin ingin validasi lainnya juga, misalnya harga saya di sini harus lebih besar dari
nol katakanlah, sehingga nol tidak diperbolehkan sebagai input. Bahwa di sisi lain bukan beberapa kriteria yang penting
bagi saya pada input lain. Kami akan menemukan solusi yang elegan untuk ini
nanti, untuk saat ini mari kita tetap dengan validasi penyebut umum terkecil yang dapat kita terapkan pada semua input untuk
memastikan mereka setidaknya tidak kosong dan
mari kita fokus pada fungsi peredam dan bagaimana status kita. harus berubah ketika
formulir ini memasukkan tindakan pembaruan dengan semua data yang dikirim karena saat ini
tidak ada yang akan terjadi.
Kami memiliki status awal kami pada peredam di sana dan itu akan diteruskan atau disimpan dalam bentuk formulir
tetapi keadaan ini tidak akan pernah berubah.
Nah itu sebabnya kami mengirim tindakan, kan?
Itu sebabnya kami melakukan ini
di sini, inilah sebabnya pembaruan formulir input dikirim dan itulah mengapa kami ingin menulis beberapa kode di sini
di peredam ketika tindakan ini mencapai kami di sini.
Sekarang di sana, jika tindakan ini mencapai kita, pada akhirnya tujuannya adalah untuk memastikan bahwa kita memperbarui snapshot keadaan
ini,
snapshot keadaan kita saat ini dengan tepat.
Ini berarti bahwa misalnya, kita akan memerlukan beberapa nilai yang diperbarui dan untuk ini, saya membuat objek
baru karena nilai input
saya di sini, itu objek dan saya akan membuat yang baru untuk menggantinya dan pertama-tama saya akan
menyalin yang sudah ada nyatakan nilai input.
Perlu diingat bahwa keadaan di sini dilewatkan secara otomatis, itu adalah snapshot keadaan kita sebelum
kita memperbaruinya dan karena itu pada awalnya, itulah snapshot keadaan ini di sini sebagai contoh dan ini
akan memiliki kunci nilai input
yang pada gilirannya memegang
objek dan itulah yang Saya menyalin di sini, saya menyalin semua pasangan nilai kunci snapshot nilai input dan
kemudian saya ingin mengganti pasangan nilai kunci untuk input yang tindakan ini
dikirim, hal baiknya adalah kita melampirkan input pengidentifikasi tindakan. Jadi kita bisa pergi ke peredam
dan secara dinamis menimpa kunci di sini di nilai input yang
disalin, kuncinya adalah tindakan. input tentu saja, itulah pengidentifikasi input kami yang kami lampirkan pada tindakan
dan nilainya harus berupa tindakan. nilai,
itu saja yang perlu kita lakukan. Jadi kami menyimpan nilai yang dikirim secara
dinamis dengan input yang ditugaskan secara dinamis dan memperbarui nilai input yang disalin.
Sekarang kita dapat mengembalikan keadaan baru di sini karena itulah tujuan peredam Anda sendiri, seperti peredam Redux,
pada akhirnya ia harus mengembalikan snapshot keadaan baru dan di sana saya ingin
menyalin keadaan yang ada tetapi mengganti nilai input dengan nilai yang diperbarui yang menyalin nilai lama saya sehingga tidak ada data yang
hilang dan kemudian menggantikan salah satu pasangan nilai kunci di sana. Sekarang jelas, tidak semua hanya mengganti
nilai atau memperbarui nilai, saya juga
ingin memperbarui validitas saya.
Jadi di sini adalah validitas saya yang diperbarui dan seperti halnya dengan nilai-nilai, saya mulai dengan
menyalin kunci input validitas saya karena validitas input adalah kunci di sini
seperti
yang Anda lihat dan kemudian saya ingin mengganti satu validitas untuk input yang kita dapatkan pada tindakan , jadi judul, imageUrl atau apa
pun itu dan ganti ini dengan tindakan adalah valid karena kami mendapatkan informasi apakah itu
valid atau tidak sebagai bagian dari tindakan yang dikirim, kan?
Kami meneruskan ini di sini berdasarkan validasi dasar yang kami miliki di sini.
Sekarang dengan itu, kita hanya perlu memperbarui ini di sini, jadi
validitas input kami di sini sama dengan validitas yang diperbarui dan sekarang kita hanya perlu
mengelola validitas formulir keseluruhan. Untuk itu, saya
menambahkan variabel, variabel pembantu, formulir valid yang awalnya benar dan kemudian saya mengulangi semua validitas saya yang
diperbarui yang merupakan validitas lama
saya yang disalin dan kemudian
satu validitas yang diperbarui untuk input yang baru saja kami ketikkan.
Jadi di sini, kami memiliki for / in loop di mana kami memeriksa semua kunci dalam validitas yang diperbarui
dan tujuannya sederhana, saya memeriksa setiap validitas input formulir dan jika semua validitas input formulir valid,
jika semuanya benar, maka keseluruhan formulir valid.
Jika setidaknya satu dari mereka
salah, bentuk keseluruhannya salah, bentuk keseluruhan tidak valid. Jadi oleh karena itu di sini formulir ini valid sama dengan formulir terbaru
adalah keadaan valid yang kita miliki dan kemudian validitas validasi terbaru untuk input yang sedang kita lihat, jadi untuk kunci ini dan kita
akan melalui semua input di sini.
Cara operator boolean ini bekerja sedemikian rupa sehingga false ini menimpa true, jadi jika
input apa pun salah, form yang valid akan disetel ke false dan tidak dapat disetel menjadi true setelahnya.
Jadi, jika setidaknya satu input tidak valid, formulir keseluruhan akan menjadi tidak valid dan karena itu
sekarang saya tidak perlu menyalin status saya lagi di sini karena saya akan mengganti seluruh
snapshot keadaan dan mengatur formulir berlaku untuk formulir turunan
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
di sini.
Sekarang hanya satu hal tambahan, jika kita tidak membuatnya menjadi ini
jika blok, jadi jika beberapa tindakan lain dikirim atau yang lain, maka saya hanya akan mengembalikan keadaan tidak berubah
di sini. Dengan itu, kami
menambahkan logika peredam yang mampu menangani input apa pun atau mengetik apa pun ke dalam input teks kami, sekarang kami hanya perlu
menggunakan status formulir yang akan berubah dengan setiap penekanan tombol yang persis seperti yang
terjadi sebelumnya tetapi sekarang semua terpusat dan bergabung menjadi satu negara terkelola yang menurut saya jauh lebih bersih
daripada memiliki banyak negara yang berbeda untuk validitas dan nilai. Dan omong-omong, mengelola semua status ini
secara manual dan terpisah akan menjadi masalah besar ketika Anda ingin memvalidasi validitas formulir keseluruhan.
Jadi sekarang kita bisa menggunakan bentuk formulir yang akan berubah dengan setiap penekanan tombol dan kita
gunakan misalnya di sini pada nilai. Kami mengembalikan nilai input teks ini dengan mengakses nilai input status formulir. judul.
Sekarang jelas, kami melakukan hal yang sama di sini untuk imageUrl, kami memberi makan ini kembali, jadi hanya apa
yang kami lakukan sebelumnya dan sekarang dengan bentuk formulir kami
dikelola dengan bantuan peredam, sama untuk harga tentu saja dan juga sama untuk deskripsi, seperti itu.
Sekarang selain mengubahnya di sini, kita juga harus mengubahnya di beberapa tempat lain, misalnya di
sini di ajukan handler tentunya. Di sana, judul valid, ini
tidak ada lagi tetapi kita dapat memeriksa status validitas input form form, itu benar atau salah dan jika salah, itu berarti itu tidak
valid, jadi pemeriksaan
ini harus baik-baik saja.
Namun tentu saja kami peduli tentang validitas semua input, jadi alih-alih hanya memeriksa semuanya secara
manual di sini dengan menggabungkannya menjadi pernyataan if panjang, kami hanya dapat memeriksa apakah
form state form valid adalah false karena itu berarti beberapa input salah dan oleh karena itu
kami menunjukkan
kesalahan ini, itu pemeriksaan yang lebih pendek dan ini tentu saja juga ketika kami ingin menghindari bahwa formulir dikirimkan.
Namun, jika formulir dikirimkan, uraian judul dan imageUrl, yang sudah tidak ada,
alih-alih itu sekarang berupa status inputValues. judul dan seterusnya, jadi kami melakukan
hal yang
sama di sini untuk deskripsi dan untuk imageUrl. Kami memperoleh nilai-nilai kami dari bentuk
formulir, sama tentu saja di sini untuk membuat. Kami mendapatkan judul dan deskripsi serta imageUrl dan juga tentu saja harga yang
masih saya konversikan ke angka dengan nilai plus di sini, kami mendapatkan semua
itu dari bentuk nilai input yang kami berikan. Oleh karena itu tentu saja ketergantungan kita di sini bukan
judul, deskripsi, imageUrl dan sebagainya, melainkan hanya bentuk keadaan. Jika bentuk menyatakan perubahan, yang akan terjadi pada
setiap keystroke, maka fungsi ini harus dibangun kembali dan perlu dibangun kembali karena
informasi yang digunakan
oleh fungsi berubah dengan setiap keystroke,
validitas dapat berubah dengan setiap keystroke, nilai yang Anda inginkan untuk mengirim dapat berubah dengan setiap penekanan tombol.
Kami juga tentu saja dapat sekarang menggunakan ini untuk menampilkan pesan kesalahan kami. Alih-alih memeriksa judul yang
valid yang
tidak ada lagi, kami memeriksa formState. inputValidities. judul, jika itu salah, maka saya ingin menunjukkan teks ini.
Jadi sekarang dengan
itu, jika kita menyimpan semua itu, kita harus dapat memeriksa ini. Jika kita pergi ke halaman kita di sini,
kita melihat kesalahan ini pada awalnya.
Jika saya mulai mengetik, itu menghilang,
jika saya mencoba mengirimkan ini, gagal karena saya memiliki tiga input kosong.
Jika saya memasukkan sesuatu yang valid di sana, di
sisi lain, ini berfungsi. Jika saya mencoba mengedit, mari
kita coba ini di Android mungkin untuk mencampuradukkan semuanya.
Jadi jika saya mencoba mengedit baju merah di sini, saya dapat mengirimkan ini dengan
baik, sekarang mari kita
juga mencoba mengirimkan ini jika ini kosong, maka saya mendapatkan peringatan.
Jadi ini berfungsi seperti seharusnya, sekarang dengan
manajemen formulir yang lebih elegan ini menggunakan peredam penggunaan dan tentu saja Anda tidak bisa hanya menggunakan peredam penggunaan saat
bekerja dengan formulir,
ini hanya contoh yang sangat bagus ketika masuk akal untuk menggabungkan beberapa negara secara bersamaan dan
karenanya memiliki kode yang sangat dapat digunakan kembali dan efisien.
Sekarang saya masih belum selesai karena semua pengulangan kode ini dengan input di sini yang
selalu terstruktur dengan cara yang sama dan kemungkinan kustomisasi yang hilang mengenai validasi, ini adalah hal-hal yang
ingin saya bahas selanjutnya.