Sekarang dengan tindakan ini sedang dikirim, kita dapat pergi ke reducer dan menulis beberapa kode di sini di input perubahan dan
itu kode yang sangat sederhana.
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
tindakan ini, yang lainnya adalah isValid dan itu hal lain yang saya juga ingin
perbarui pada setiap penekanan tombol, isValid untuk input ini, bukan untuk seluruh
formulir tetapi untuk input ini dikelola secara internal. Saya tidak akan memperbarui yang disentuh di sini, alih-alih yang disentuh
harus diperbarui ketika kita benar-benar kehilangan fokus karena itu berarti pengguna selesai memasukkan konten untuk
saat ini, jadi sekarang saya ingin menandainya sebagai tersentuh dan mungkin menunjukkan kesalahan validasi. Jadi di sini, kehilangan penangan fokus adalah fungsi yang
saya tambahkan dan di sana, saya akan mengirimkan
tindakan. Sekarang untuk
itu, saya akan membuat pengidentifikasi tindakan
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
kami, kami dapat menggunakan bahwa dengan kasus lain, masukan kabur dan jika itu yang terjadi, saya mengembalikan negara baru tempat
saya menyalin negara lama karena saya ingin menyimpan nilai dan valid dan tidak
mengubah itu tetapi saya ingin mengatur sentuhan ke true, jadi segera saat kita mengaburkan input, itu diperlakukan sebagai disentuh.
Sekarang kita hanya perlu menghubungkan fungsi ini, jadi saya akan mengatur pendengar onBlur di sini dan menunjuk pada handler fokus yang hilang
sehingga ini memicu ketika input ini kabur.
Sekarang semuanya bagus dan ini akan mengatur keadaan di dalam input ini, tentu saja
saya masih perlu meneruskan nilai dan informasi, apakah input itu valid atau
tidak, kepada orang tua saya, jadi ke layar edit produk. Maka yang dapat kita lakukan adalah kita dapat menambahkan efek penggunaan di sini
sebagai
impor dalam komponen input dan mungkin menambahkannya di sini dan dalam fungsi efek penggunaan, saya ingin memanggil fungsi yang saya harapkan dapatkan
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,
sehingga dalam komponen induk, kita dapat menambahkan fungsi di sini yang mendengarkan pada akhirnya, yang dipicu, yang
menerima dua argumen ini dan kemudian di induknya, jadi di komponen layar,
kita dapat memperbarui status kita di sana. Sekarang yang penting adalah kapan harus menggunakan efek
ini berjalan dan seharusnya tidak berjalan setelah setiap keystroke? Alih-alih, ini harus dijalankan setiap kali
nilai status input kami atau perubahan yang valid tentu saja, karena itulah yang kami andalkan atau tepatnya, kami mungkin bahkan hanya
mengirim informasi ini jika status input yang disentuh benar karena jika tidak komponen induk mungkin tidak peduli.
Jadi sekarang ketergantungan kita di sini adalah seluruh kondisi input karena kita menggunakan semua nilai tetapi kita hanya
akan menjalankan fungsi ini pada komponen induk jika disentuh benar, jadi efek ini akan berjalan lebih
sering tetapi sebagian besar waktu itu tidak akan melakukan apa pun selama disentuh tidak benar dan alat peraga tentu
saja juga ketergantungan kita, sekarang untuk menghindari loop rendering tak terbatas di sini, kita dapat menggunakan sintaksis objek perusak dan menarik keluar
pada perubahan input, sehingga jika alat peraga lain berubah, kita tidak menolak efek ini karena pada perubahan input adalah apa yang kita butuhkan
di sana dan sekarang kita dapat menambahkan ini adalah ketergantungan dan hal-hal lain, perubahan lain pada alat
peraga tidak akan memicu ini.
Jadi sekarang kita menyebutnya pada komponen induk setiap kali ini disentuh dan kemudian kita meneruskan nilai
dan validitas input ini ke komponen induk.
Jadi sekarang mari kita gunakan itu di layar edit produk, di sana pada input kita seperti pada input judul, kita dapat
menambahkan prop pada input perubahan dan itulah prop yang saya targetkan di sini, jadi Anda harus mendapatkan penamaan itu
dengan benar dan ini mengharapkan untuk mendapatkan fungsi sebagai nilai yang kemudian akan
menerima dua argumen ketika dipanggil - nilai dan validitas input itu.
Jadi di sini saya ingin menunjuk pada suatu fungsi dan itu bisa menjadi kita katakanlah input handler perubahan, kita dapat mendaur ulang
ini, saya hanya mengubah nama menjadi lebih pas.
Jadi pengendali perubahan input dapat dipicu di sini, seperti ini, di sana saya ingin tetap meneruskan pengenal saya karena saya ingin menggunakan
kembali itu untuk semua input saya dan sekarang karena saya berada di komponen layar,
kita akan memiliki beberapa input dan ada , oleh karena itu kami mendapatkan pengenal kami dan kemudian kami mendapatkan nilai dan informasi
yang valid, kan?
Jadi nilai input dan validitas input, itulah yang kami dapatkan, benar, karena itulah
yang kami teruskan dari dalam komponen input di
sini, itulah yang kami
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
dan ini hanya akan terjadi ketika input disentuh oleh jalan, jadi ketika kehilangan fokus dan tentu saja itu hanya batasan
yang saya tambahkan di
sini, bahwa Anda harus kehilangan fokus, Anda tentu saja bisa juga pergi ke
komponen input dan menghapus ini jika centang untuk memperbarui validitas dan nilai dalam komponen
induk untuk setiap input, untuk setiap penekanan tombol. Sekarang satu hal tambahan yang ingin saya lakukan, saya
ingin membungkus ini dengan menggunakan panggilan panggil balik di sini, sehingga fungsi ini tidak perlu dibangun kembali karena perlu diingat bahwa kami meneruskan
fungsi ini pada perubahan input pada komponen input dan ada di sisi lain, ini adalah ketergantungan
dari
efek ini, sehingga efek
ini akan dijalankan kembali setiap kali ini berubah.
Jadi itu tidak boleh berubah terlalu sering untuk menghindari efek yang tidak perlu berjalan
dan di sini karena itu kita perlu menyatakan dependensi kita dan satu-satunya dependensi yang kita miliki adalah status
pengiriman yang sebenarnya tidak akan pernah berubah, jadi
kita
baik, ini tidak boleh dibangun kembali karena logika di
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
ini di sini karena saya perlu mengirimkannya nanti dan karena saya perlu memperoleh validitas formulir keseluruhan. Saya tidak melakukannya karena saya
perlu mengelola setiap input di sini,
kami melakukannya dari dalam komponen input saja. Untuk pengiriman dan sebagainya,
kami
masih membutuhkan informasi tentang setiap toko, nilainya. Sekarang jika saya kembali ke input, jangan lupa bahwa Anda juga perlu mengatur prop
nilai awal dan apakah ini harus
awalnya valid, jadi jika saya kembali ke layar edit produk, sekarang kita harus menetapkan nilai awal di sini untuk apa?
Nah, kita dapat memeriksa apakah kita memiliki produk yang diedit dan jika kita lakukan, maka nilai awal di
sini harus dieditProduk. judul,
jika tidak, ini adalah string kosong dan ini seharusnya awalnya valid, jadi gunakan prop ini di
sini jika kami memiliki
produk yang diedit, jadi
jika ini, dengan double bang di sini, jika ini benar. Jika kami tidak memiliki produk yang diedit, maka ini awalnya
tidak
dapat valid, maka saya
memberikan false yang bagus, yang memang seharusnya demikian.
Sekarang kita bisa menyalin dua baris ini, juga ke imageUrl, tentu saja kita meneruskan nilai URL
gambar sebagai nilai default, selain itu, bisa tetap seperti ini. Untuk harga, kami tidak akan pernah memiliki nilai awal dan
itu tidak akan pernah awalnya valid. Untuk deskripsi di sisi lain, kita dapat
kembali menambahkan ini dan di sini arahkan ke deskripsi.
Sekarang dengan itu, ada satu hal yang perlu saya perbaiki dalam komponen input yang juga baru saja saya pikirkan, tentu
saja di sini, bentuk formulir tidak tersedia lagi, alih-alih kami memiliki keadaan internal
kami di sini dan saya menamakan status masukan ini, yaitu apa peredam saya
kembali, jadi kita harus menggunakannya
di sini tentu saja.
Jadi di sini kita memiliki inputState. nilai sebagai nilai, sesederhana itu dan
di sini kita memiliki inputState. isValid sebagai cek dan itu semua.
Sekarang jika kita menyimpan ini dan melihat ini, mari kita lihat apakah itu berhasil. Jika kita pergi ke sini, kita memiliki semua pesan
kesalahan pada awalnya yang masuk akal karena mereka semua
pada awalnya tidak valid, jika saya mulai mengetik di sini, saya mendapatkan kesalahan, tidak dapat menemukan variabel isValid dalam komponen
input saya, yang harus di pawang yang menembak untuk setiap keystroke, mungkin di sini, ya di peredam tentu saja
saya harus memeriksa tindakan.
isValid, bukan hanya isValid, saya harus
mendapatkan ini dari tindakan. Jadi dengan perbaikan itu di sini,
mari kembali dan mari coba ini lagi. Jika saya mulai mengetik, ini dihapus,
jika saya mengembalikan ini, kesalahan saya tidak kembali, jadi itu adalah sedikit
kesalahan yang harus kami perbaiki. Untuk harga, 0
maka tidak diperlakukan sebagai valid, satu juga tidak, jadi validasi
memiliki beberapa masalah tetapi masuk dan sebagainya
berfungsi tetapi mari kita lihat apa yang salah dengan validasi sekarang.
Tentu saja cara validasi berfungsi di sini, kami tidak menggunakannya.
Harap diingat bahwa saya selalu memeriksa apakah jenis validasi ini diaktifkan untuk input ini atau jenis ini atau jenis ini dan kami melakukan
ini dengan bantuan alat peraga khusus yang perlu kami atur. Saat ini tidak ada
validasi yang diaktifkan, sehingga hanya nilai-nilai tidak valid default yang diperhitungkan.
Jadi jika saya pergi ke layar edit produk, kami sekarang mengaktifkan validasi khusus ini dengan mengatur
properti yang tepat, misalnya di sini pada input judul, diperlukan. Pada imageUrl, juga diperlukan. Pada harga di sini, diperlukan dan mungkin
juga min sama dengan nol, sehingga nol adalah angka minimum yang harus kita masukkan atau angka yang
lebih
besar dari yang sebenarnya, jadi mungkin 0. 1 adalah angka minimum kami. Untuk uraian, harus juga diperlukan dan mungkin juga panjang minimum
sama dengan 5, untuk memiliki setidaknya 5 karakter. Ada juga satu hal tambahan yang perlu kita lakukan di
sini di layar edit produk, ini pada input handler perubahan di sini juga perlu ditambahkan ke setiap input
tentu saja, tidak hanya untuk input judul. Jadi kita perlu menambahkan ini untuk
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
ke input deskripsi dan mengganti pengenal dengan cara yang benar.
Jadi mari kita coba ini dan Anda akan melihat
sesuatu yang aneh, jika Anda mengetik di sini, itu
berfungsi, jika Anda mengetik di
imageUrl, tidak berfungsi dengan benar, validasinya tidak diperbarui dan Anda tidak dapat kembali juga, setidaknya ini mungkin macet.
Jadi, jika kita memuat ulang ini dengan kesalahan perintah atau menekan dua kali R pada Android dan kami coba
lagi di sini, katakanlah pada harga Anda akan melihat ini bekerja tetapi mengapa tidak
bekerja dan hal yang sama akan terjadi dengan cara jika Anda
mencobanya di imageUrl, ini berfungsi. Mengapa ini bekerja jika saya sebelumnya mengedit input
lain karena sekarang misalnya, tidak berfungsi pada judul lagi? Dan masalahnya terkait dengan ini terjebak di sini.
Kami terlalu sering merender komponen ini dan alasannya sangat sulit untuk dilacak.
Pada akhirnya, kami memiliki semacam loop tak
terbatas di sini dan masalahnya adalah handler perubahan input kami.
Kami menggunakan panggilan balik di sini untuk menghindari rekreasi yang tidak perlu, tetapi dengan mengikatnya seperti ini,
kami membuat ini usang, tidak ada bedanya sekarang karena ini akan membuat fungsi baru mengikat untuk
setiap siklus rerender.
Jadi pada akhirnya yang harus kita lakukan adalah kita harus menghapus bind di sini, menghapusnya di sini
di semua tempat ini
karena ini akan merusak aplikasi kita, itu akan menyebabkan siklus rerender terlalu banyak
karena penggunaan panggilan balik tidak memiliki efek dan sebaliknya kita
mungkin ingin meneruskan prop judul ID dan seterusnya ke komponen input kami.
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
hanya meneruskan ini ke komponen input sehingga kita dapat menggunakannya di sana, mari kita lakukan
ini untuk semua input ini di sini dan sekarang bagaimana kita bisa menggunakannya?
Di dalam input, kami sekarang memiliki ID prop yang tersedia, jadi
di sana kami dapat melampirkan ini.
Jadi di sini kita dapat meneruskan alat peraga. id atau cukup ID sehingga kita tidak perlu menambahkan alat peraga di
sini dan sebagai gantinya menarik keluar ID dari alat peraga di sini seperti yang kita lakukan dengan perubahan input dan
menambahkan ID sebagai ketergantungan dari efek ini sesudahnya. Dan sekarang dengan itu, kami masih meneruskan pengidentifikasi
input ini tetapi dengan cara yang lebih elegan yang menghindari penggunaan bind yang pada akhirnya
menciptakan kembali fungsi ini untuk setiap siklus render dan karenanya
mengarah ke loop tak terbatas dan oleh karena itu sekarang jika kita memuat ulang
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
siklus render tak terbatas ini dan kami mendapatkan validasinya seperti yang kami inginkan.
Jadi sekarang ini pendekatan saya atau ini pendekatan yang ingin saya tunjukkan di sini, yang dapat Anda gunakan untuk memiliki komponen
input yang dapat digunakan kembali yang melakukan validasinya sendiri, yang dapat Anda konfigurasikan dari luar dan di
mana Anda masih dapat mengelola formulir keseluruhan.
Dengan itu, mari selami beberapa
finetuning, seperti misalnya menata pesan kesalahan yang kami tampilkan ini, pesan kesalahan validasi ini dan juga mengendalikan
ketika kami menampilkannya karena saya tidak ingin menunjukkannya sepanjang waktu.