Sekarang saya akan mengatakan bahwa kita akan melihat lebih dalam tentang bagaimana bekerja dengan input pengguna dan
seterusnya dalam modul terpisah dalam modul kursus berikutnya, oleh karena itu saya tidak akan membahasnya secara mendalam sekarang.
Satu-satunya hal yang ingin saya lakukan sekarang adalah menambahkan input teks di sini ke layar edit produk
dan kemudian mengeluarkan beberapa input teks di sini yang memungkinkan kita untuk mengambil input pengguna dan pada akhirnya, memungkinkan
kita untuk menambah atau mengedit produk tanpa validasi atau sesuatu yang istimewa di sana.
Jadi saya juga akan mengimpor tampilan gulir karena saya akan mulai dengan membungkus semuanya dengan tampilan gulir
karena Anda pasti bisa melihat ini pada perangkat kecil atau dalam mode
lansekap di mana tidak semuanya cocok ke dalam satu layar. Sekarang di sana, kita akan memiliki beberapa tampilan dengan input teks yang berbeda, jadi
di sini kita akan selalu memiliki teks dengan label, seperti judul produk yang harus Anda masukkan dan di bawahnya,
input teks yang memungkinkan Anda memasukkan judul ini dan pada akhirnya, saya akan mengulanginya untuk semua hal berbeda yang ingin
Anda tambahkan.
Sekarang beberapa
gaya akan diperlukan, jadi di sini untuk input teks, saya akan menambahkan gaya
input dan pada teks di atas itu, saya akan menambahkan
label gaya gaya, Anda juga dapat memberikan tampilan ini gaya bentuk keseluruhan kontrol misalnya, apa
pun yang Anda ingin beri nama dan sekarang kita dapat mengulanginya untuk judul, untuk imageUrl di sini, untuk harga dan
juga terakhir tetapi tidak kalah pentingnya, untuk deskripsi. Saya juga akan membungkus hal-hal ini secara keseluruhan ke
tampilan lain, jadi semua kontrol bentuk ini pada akhirnya yang akan saya berikan gaya gaya bentuk.
Sekarang saatnya untuk mengerjakan style ini
di sini, jadi di sana di stylesheet, untuk form saya akan menetapkan margin 20 di semua arah,
jadi ada beberapa jarak di sekitar input ini. Untuk input saya di sini, untuk label kontrol
formulir dan input, saya juga ingin menambahkan beberapa gaya, jadi di sini saya akan memiliki kontrol formulir, label saya dan kemudian juga input itu
sendiri, sehingga input teks itu sendiri dan untuk kontrol formulir , Saya ingin mengatur lebar 100 untuk
memastikan bahwa ini selebar mungkin. Untuk label, saya
akan mengatur keluarga font untuk membuka sans bold untuk memiliki beberapa teks tebal di
sini dan kemudian margin vertikal 8 untuk memiliki beberapa spasi di atas
dan bawah dan untuk input
itu sendiri yang merupakan elemen input teks ini, saya ingin memiliki padding horizontal
dua, jadi padding sangat kecil sehingga ketika kita memasukkan teks, kita tidak langsung di tepi input
dan padding vertikal 5, jadi padding kecil ke atas dan bawah dan batas bawah warna sedikit keabu-abuan ini dengan kode hex ccc dan kemudian lebar bawah satu
dan itulah gaya yang akan saya gunakan untuk saat ini. Sekarang jika kita melihat itu dengan pergi ke admin dan kemudian misalnya menambahkan yang
baru, ini adalah tampilannya, tidak terlihat terlalu buruk, tentu saja tidak
dikonfigurasi dengan cara apa pun kecuali beberapa untuk memulai dan tentu saja sekarang
saya ingin dapat mengirimkan ini dan menyimpan ini juga.
Untuk itu di
layar edit produk, saya ingin memiliki tombol tindakan, jadi tombol di header, maka di sini sebelum gaya mungkin, pesanan tidak masalah tetapi saya ingin memilikinya tepat
di sebelah komponen, saya akan tambahkan opsi navigasi di mana saya memerlukan sintaks dinamis karena kita perlu melakukan
sesuatu yang dinamis dari dalam header dan kemudian di sini, kita mengembalikan objek konfigurasi di mana untuk
satu, Anda dapat mengatur judul header dan itu juga harus dinamis karena ada , Saya ingin
menampilkan apakah kita sedang mengedit atau menambahkan, itu akan tergantung pada kenyataan apakah kita memiliki param ID produk
atau tidak, jadi kita sudah dapat mengakses navData. navigasi. getParam.
Sekarang jika Anda melihat pada layar produk pengguna, Anda akan melihat bahwa ketika
kita mengklik tombol edit, kami mengirimkan parameter ID produk di sini untuk mengedit navigasi produk, ketika kami mengklik ikon add di header namun
,
kami tidak lulus itu.
Jadi param ID produk, jika itu tersedia, kami tahu kami dalam mode edit.
Jadi di sini saya dapat memeriksa apakah kami bisa mendapatkan nilai untuk itu dan jika itu benar-ish,
maka saya menunjukkan edit produk sebagai judul,
kalau tidak saya akan menunjukkan menambahkan produk karena itu adalah indikator yang jelas bagi saya apakah kami sedang mengedit atau menambahkan.
Judul header bukan segalanya yang harus menjadi bagian dari
konfigurasi, saya juga ingin
memiliki bagian kanan header untuk memiliki tombol yang memungkinkan saya untuk menyimpan data saya dan
untuk itu, saya akan pergi ke layar produk pengguna dan menyalin. setup ini
saya miliki di sana dengan tombol header, salin ke layar edit produk dan tentu saja karena itu juga menyalin
impor tombol header dan tombol header dan item ke untuk mengedit layar produk dan menambahkan ini di sini dan sekarang tentu saja, kami perlu men-tweak ini
sedikit karena tentu saja tombol add tidak masuk akal di sini, menyimpan tampaknya menjadi
label yang lebih tepat dan ikon yang ingin saya gunakan karena itu adalah tanda centang md dan tanda centang
iOS yang membuat ikon tanda centang yang bagus. Tentu saja di sini, saya juga tidak ingin menavigasi untuk
mengedit produk tetapi sebaliknya, saya ingin mengirimkan formulir saya dan itu adalah sesuatu yang akan kami kerjakan dalam sedetik.
Pertama, kita perlu memastikan bahwa kita dapat menyimpan semua input pengguna dan
bahwa kita juga mengisi formulir ini jika kita mengedit. Jadi untuk menyimpan input pengguna, kita dapat menggunakan hook status penggunaan dari
React dan cukup mengatur status untuk masing-masing
input teks ini, jadi kita akan memiliki empat negara di sini
pada akhirnya dengan status use, masing-masing diinisialisasi ke string kosong awalnya dan kemudian kita memiliki judul dan
menetapkan judul dan ulangi yang pada dasarnya juga memiliki seperti imageUrl dan mengatur imageUrl dan kemudian di sini, dapatkan harga dan harga
set dan
kemudian di sini juga memiliki deskripsi dan mengatur deskripsi dan lagi, kita akan memperbaiki ini di modul berikutnya di mana
kita menyelam lebih dalam menangani input pengguna.
Untuk saat ini, saya hanya akan mengikat ini ke input teks saya, nilai di sini terikat ke judul untuk yang pertama
ini yang merupakan input judul saya dan pada perubahan teks di sini, saya mendapatkan teks saya di sini yang berubah dan saya akan menyimpan ini kembali ke atur judul dalam hal ini di
sini, sehingga saya memperbarui status judul saya dengan teks judul yang baru dimasukkan. Dan sekarang pola ini yang kita tambahkan ke semua
input teks ini di sini, di sini
tentu saja untuk yang kedua kita berbicara tentang imageUrl dan mengatur imageUrl tetapi selain
itu, itu sama. Untuk harga, tidak
mengherankan kami melewati harga dan kami sebut harga yang ditetapkan tetapi selain itu, itu sama.
Harap dicatat bahwa harga karenanya tentu saja juga dikelola sebagai string di sini
karena apa pun yang selalu dimasukkan pengguna adalah teks dan di sini untuk input teks, saya akan meneruskan deskripsi saya dan mengatur deskripsi saya di
sini.
Dengan itu, data dikelola, sekarang untuk mengisi lebih dulu bahwa ketika kita memiliki resep, ketika kita memuat produk dan kita sedang
dalam mode edit, kita hanya perlu mendapatkan ID produk kami dengan bantuan alat peraga navigasi dapatkan param, ada , ID produk adalah
parameter yang dapat kami perbaiki untuk mengambil dan jika ID prod diatur, maka saya tahu kami berada dalam mode edit
dan kemudian saya tentu saja ingin mengisi kembali bidang saya di sini dengan nilai-nilai.
Sekarang sebenarnya, itu berarti saya ingin memuat produk saya berdasarkan ID prod dari negara Redux saya.
Jadi kami mengimpor pemilih penggunaan dari React Redux di sini dan sekarang di sini, kami bisa mendapatkan produk yang diedit dengan menjangkau pemilih penggunaan ke status Redux kami dan sekarang di sini tentu saja, kami perlu menyelami potongan produk kami
dan Anda selalu dapat memeriksa peredam jika Anda tidak yakin
bagaimana itu terstruktur lagi dan di sana, kita melihat di bagian produk peredam kami,
dari toko Redux kami, saya harus mengatakan, kami memiliki array produk pengguna pada
akhirnya, jadi itulah yang saya tertarik di sini, saya menjangkau produk
pengguna dan sekarang
saya ingin mencari produk dengan ID produk itu. Jadi di sini, saya akan melihat setiap
produk, fungsi find melakukan ini untuk saya dan saya ingin mengembalikan true jika ID
produk yang saya lihat sama dengan ID produk yang saya ambil dari parameter saya.
Sekarang tentu saja kadang-kadang ini tidak akan menghasilkan apa pun jika ID prod tidak
disetel karena parameter ini tidak disetel yang selalu menjadi kasus ketika kita mengklik tombol add ini, maka parameter ini
tidak akan pernah ditetapkan tetapi tidak apa-apa. Jadi produk yang diedit kemudian hanya akan didefinisikan yang benar-benar baik-baik saja. Kalau tidak, jika produk yang
diedit tidak ditentukan, jika diatur oleh karena itu, kita tahu kita berada dalam mode
edit dan karena itu kita dapat mempopulasikan nilai-nilai kita. Oleh karena itu sebenarnya saya akan melakukan ini terlebih dahulu sebelum saya menginisialisasi keadaan
saya karena itu adalah sesuatu yang ingin saya inisialisasi tergantung pada apakah kita memuat suatu produk atau tidak.
Jadi judul di sini, sebenarnya di sana saya akan memeriksa apakah produk yang diedit, jika sudah diatur, jika sudah
diatur, maka saya akan menginisialisasi judul yang akan dieditProduk. judul, kalau tidak itu akan menjadi
string kosong dan saya akan memiliki logika yang sama untuk imageUrl di sini.
Jadi di sini saya melakukan itu untuk imageUrl, bukan untuk harga karena harganya tidak boleh berubah tetapi
saya akan melakukannya untuk deskripsi.
Jadi nilai default judul, imageUrl, dan deskripsi tergantung pada apakah
kita memiliki produk yang diedit atau tidak. Dan sekarang dengan itu, karena kita mengatur ini pada keadaan,
ini akan secara otomatis dimasukkan ke input teks kita dan satu-satunya adalah, saya perlu memastikan
bahwa saya menghapus input harga di sini jika kita dalam mode edit. Jadi saya akan memeriksa apakah produk yang diedit diatur di sini
dan jika itu yang terjadi,
maka saya akan mengembalikan
nol di sini dan hanya sebaliknya jika tidak disetel, jadi jika saya dalam mode tambah, bukan dalam mode edit, saya akan merendernya input
harga di sini, sehingga input harga dihapus jika kita mengedit karena saya tidak dapat mengeditnya.
Jadi sekarang dengan itu, mari kita coba dan mari kita kembali ke layar admin. Jika saya mengklik add, ya saya perlu menambahkan
kembali impor platform karena saya menggunakannya pada tombol header untuk memberikan tanda
centang, ikon tergantung pada platform.
Jadi mari kita pastikan kita mengimpor platform di layar edit produk, tetapi sekarang jika saya klik add,
kita melihat keempat impor, semuanya kosong di awal. Jika saya mengklik edit di sisi lain, mereka sudah diisi
sebelumnya dan saya tidak melihat input harga yang persis apa yang saya inginkan.
Sekarang saatnya memastikan bahwa ketika kami mengirimkan ini, kami memperbarui produk
kami jika sedang mengedit atau jika kami menambahkannya, kami menambahkan produk baru.
Sekarang lagi, untuk saat ini saya tidak akan menambahkan validasi, kami akan melakukannya nanti.
Jadi untuk saat ini kami juga dapat mengirimkan produk kosong, nanti setelah modul berikutnya, ini
tidak akan mungkin lagi.