1
00:00:02,270 --> 00:00:07,790
Sekarang saya akan mengatakan bahwa kita akan melihat lebih dalam tentang bagaimana bekerja dengan input pengguna dan

2
00:00:07,790 --> 00:00:13,530
seterusnya dalam modul terpisah dalam modul kursus berikutnya, oleh karena itu saya tidak akan membahasnya secara mendalam sekarang.

3
00:00:13,640 --> 00:00:19,460
Satu-satunya hal yang ingin saya lakukan sekarang adalah menambahkan input teks di sini ke layar edit produk

4
00:00:19,460 --> 00:00:25,730
dan kemudian mengeluarkan beberapa input teks di sini yang memungkinkan kita untuk mengambil input pengguna dan pada akhirnya, memungkinkan

5
00:00:25,730 --> 00:00:31,010
kita untuk menambah atau mengedit produk tanpa validasi atau sesuatu yang istimewa di sana.

6
00:00:31,010 --> 00:00:37,900
Jadi saya juga akan mengimpor tampilan gulir karena saya akan mulai dengan membungkus semuanya dengan tampilan gulir

7
00:00:37,940 --> 00:00:43,160
karena Anda pasti bisa melihat ini pada perangkat kecil atau dalam mode

8
00:00:43,160 --> 00:00:52,000
lansekap di mana tidak semuanya cocok ke dalam satu layar. Sekarang di sana, kita akan memiliki beberapa tampilan dengan input teks yang berbeda, jadi

9
00:00:52,000 --> 00:00:57,640
di sini kita akan selalu memiliki teks dengan label, seperti judul produk yang harus Anda masukkan dan di bawahnya,

10
00:00:57,640 --> 00:01:03,700
input teks yang memungkinkan Anda memasukkan judul ini dan pada akhirnya, saya akan mengulanginya untuk semua hal berbeda yang ingin

11
00:01:03,850 --> 00:01:04,500
Anda tambahkan.

12
00:01:05,460 --> 00:01:07,170
Sekarang beberapa

13
00:01:07,170 --> 00:01:14,220
gaya akan diperlukan, jadi di sini untuk input teks, saya akan menambahkan gaya

14
00:01:15,000 --> 00:01:20,310
input dan pada teks di atas itu, saya akan menambahkan

15
00:01:20,440 --> 00:01:28,250
label gaya gaya, Anda juga dapat memberikan tampilan ini gaya bentuk keseluruhan kontrol misalnya, apa

16
00:01:28,390 --> 00:01:38,710
pun yang Anda ingin beri nama dan sekarang kita dapat mengulanginya untuk judul, untuk imageUrl di sini, untuk harga dan

17
00:01:38,800 --> 00:01:47,470
juga terakhir tetapi tidak kalah pentingnya, untuk deskripsi. Saya juga akan membungkus hal-hal ini secara keseluruhan ke

18
00:01:47,460 --> 00:01:55,000
tampilan lain, jadi semua kontrol bentuk ini pada akhirnya yang akan saya berikan gaya gaya bentuk.

19
00:01:57,490 --> 00:02:00,370
Sekarang saatnya untuk mengerjakan style ini

20
00:02:00,400 --> 00:02:07,490
di sini, jadi di sana di stylesheet, untuk form saya akan menetapkan margin 20 di semua arah,

21
00:02:07,490 --> 00:02:13,690
jadi ada beberapa jarak di sekitar input ini. Untuk input saya di sini, untuk label kontrol

22
00:02:13,690 --> 00:02:22,800
formulir dan input, saya juga ingin menambahkan beberapa gaya, jadi di sini saya akan memiliki kontrol formulir, label saya dan kemudian juga input itu

23
00:02:22,810 --> 00:02:29,270
sendiri, sehingga input teks itu sendiri dan untuk kontrol formulir , Saya ingin mengatur lebar 100 untuk

24
00:02:29,270 --> 00:02:33,390
memastikan bahwa ini selebar mungkin. Untuk label, saya

25
00:02:33,430 --> 00:02:39,450
akan mengatur keluarga font untuk membuka sans bold untuk memiliki beberapa teks tebal di

26
00:02:39,450 --> 00:02:45,090
sini dan kemudian margin vertikal 8 untuk memiliki beberapa spasi di atas

27
00:02:45,510 --> 00:02:47,580
dan bawah dan untuk input

28
00:02:47,580 --> 00:02:53,580
itu sendiri yang merupakan elemen input teks ini, saya ingin memiliki padding horizontal

29
00:02:53,580 --> 00:03:00,800
dua, jadi padding sangat kecil sehingga ketika kita memasukkan teks, kita tidak langsung di tepi input

30
00:03:00,810 --> 00:03:12,900
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

31
00:03:12,900 --> 00:03:21,630
dan itulah gaya yang akan saya gunakan untuk saat ini. Sekarang jika kita melihat itu dengan pergi ke admin dan kemudian misalnya menambahkan yang

32
00:03:21,660 --> 00:03:25,340
baru, ini adalah tampilannya, tidak terlihat terlalu buruk, tentu saja tidak

33
00:03:25,380 --> 00:03:29,450
dikonfigurasi dengan cara apa pun kecuali beberapa untuk memulai dan tentu saja sekarang

34
00:03:30,000 --> 00:03:33,220
saya ingin dapat mengirimkan ini dan menyimpan ini juga.

35
00:03:33,420 --> 00:03:34,960
Untuk itu di

36
00:03:34,990 --> 00:03:44,160
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

37
00:03:44,220 --> 00:03:50,730
di sebelah komponen, saya akan tambahkan opsi navigasi di mana saya memerlukan sintaks dinamis karena kita perlu melakukan

38
00:03:50,730 --> 00:03:56,910
sesuatu yang dinamis dari dalam header dan kemudian di sini, kita mengembalikan objek konfigurasi di mana untuk

39
00:03:56,910 --> 00:04:02,670
satu, Anda dapat mengatur judul header dan itu juga harus dinamis karena ada , Saya ingin

40
00:04:02,670 --> 00:04:09,090
menampilkan apakah kita sedang mengedit atau menambahkan, itu akan tergantung pada kenyataan apakah kita memiliki param ID produk

41
00:04:09,090 --> 00:04:17,490
atau tidak, jadi kita sudah dapat mengakses navData. navigasi. getParam.

42
00:04:17,490 --> 00:04:23,010
Sekarang jika Anda melihat pada layar produk pengguna, Anda akan melihat bahwa ketika

43
00:04:23,370 --> 00:04:33,630
kita mengklik tombol edit, kami mengirimkan parameter ID produk di sini untuk mengedit navigasi produk, ketika kami mengklik ikon add di header namun

44
00:04:33,630 --> 00:04:34,190
,

45
00:04:34,200 --> 00:04:36,150
kami tidak lulus itu.

46
00:04:36,480 --> 00:04:41,420
Jadi param ID produk, jika itu tersedia, kami tahu kami dalam mode edit.

47
00:04:41,550 --> 00:04:46,410
Jadi di sini saya dapat memeriksa apakah kami bisa mendapatkan nilai untuk itu dan jika itu benar-ish,

48
00:04:46,410 --> 00:04:48,640
maka saya menunjukkan edit produk sebagai judul,

49
00:04:48,650 --> 00:04:54,390
kalau tidak saya akan menunjukkan menambahkan produk karena itu adalah indikator yang jelas bagi saya apakah kami sedang mengedit atau menambahkan.

50
00:04:55,350 --> 00:04:59,050
Judul header bukan segalanya yang harus menjadi bagian dari

51
00:04:59,220 --> 00:05:01,260
konfigurasi, saya juga ingin

52
00:05:01,260 --> 00:05:07,140
memiliki bagian kanan header untuk memiliki tombol yang memungkinkan saya untuk menyimpan data saya dan

53
00:05:07,170 --> 00:05:12,140
untuk itu, saya akan pergi ke layar produk pengguna dan menyalin. setup ini

54
00:05:12,330 --> 00:05:19,740
saya miliki di sana dengan tombol header, salin ke layar edit produk dan tentu saja karena itu juga menyalin

55
00:05:19,740 --> 00:05:29,850
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

56
00:05:29,850 --> 00:05:35,280
sedikit karena tentu saja tombol add tidak masuk akal di sini, menyimpan tampaknya menjadi

57
00:05:35,280 --> 00:05:42,570
label yang lebih tepat dan ikon yang ingin saya gunakan karena itu adalah tanda centang md dan tanda centang

58
00:05:42,600 --> 00:05:49,220
iOS yang membuat ikon tanda centang yang bagus. Tentu saja di sini, saya juga tidak ingin menavigasi untuk

59
00:05:49,250 --> 00:05:55,470
mengedit produk tetapi sebaliknya, saya ingin mengirimkan formulir saya dan itu adalah sesuatu yang akan kami kerjakan dalam sedetik.

60
00:05:55,490 --> 00:06:01,250
Pertama, kita perlu memastikan bahwa kita dapat menyimpan semua input pengguna dan

61
00:06:01,250 --> 00:06:11,520
bahwa kita juga mengisi formulir ini jika kita mengedit. Jadi untuk menyimpan input pengguna, kita dapat menggunakan hook status penggunaan dari

62
00:06:11,520 --> 00:06:14,810
React dan cukup mengatur status untuk masing-masing

63
00:06:15,000 --> 00:06:19,560
input teks ini, jadi kita akan memiliki empat negara di sini

64
00:06:19,620 --> 00:06:26,920
pada akhirnya dengan status use, masing-masing diinisialisasi ke string kosong awalnya dan kemudian kita memiliki judul dan

65
00:06:26,920 --> 00:06:36,190
menetapkan judul dan ulangi yang pada dasarnya juga memiliki seperti imageUrl dan mengatur imageUrl dan kemudian di sini, dapatkan harga dan harga

66
00:06:36,580 --> 00:06:37,990
set dan

67
00:06:38,140 --> 00:06:46,390
kemudian di sini juga memiliki deskripsi dan mengatur deskripsi dan lagi, kita akan memperbaiki ini di modul berikutnya di mana

68
00:06:46,390 --> 00:06:49,340
kita menyelam lebih dalam menangani input pengguna.

69
00:06:49,360 --> 00:06:55,210
Untuk saat ini, saya hanya akan mengikat ini ke input teks saya, nilai di sini terikat ke judul untuk yang pertama

70
00:06:55,210 --> 00:07:04,090
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

71
00:07:04,350 --> 00:07:11,920
sini, sehingga saya memperbarui status judul saya dengan teks judul yang baru dimasukkan. Dan sekarang pola ini yang kita tambahkan ke semua

72
00:07:11,920 --> 00:07:15,550
input teks ini di sini, di sini

73
00:07:15,730 --> 00:07:22,270
tentu saja untuk yang kedua kita berbicara tentang imageUrl dan mengatur imageUrl tetapi selain

74
00:07:22,270 --> 00:07:25,390
itu, itu sama. Untuk harga, tidak

75
00:07:25,390 --> 00:07:31,700
mengherankan kami melewati harga dan kami sebut harga yang ditetapkan tetapi selain itu, itu sama.

76
00:07:31,720 --> 00:07:36,550
Harap dicatat bahwa harga karenanya tentu saja juga dikelola sebagai string di sini

77
00:07:36,550 --> 00:07:45,880
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

78
00:07:45,880 --> 00:07:46,340
sini.

79
00:07:47,980 --> 00:07:57,550
Dengan itu, data dikelola, sekarang untuk mengisi lebih dulu bahwa ketika kita memiliki resep, ketika kita memuat produk dan kita sedang

80
00:07:57,550 --> 00:08:07,590
dalam mode edit, kita hanya perlu mendapatkan ID produk kami dengan bantuan alat peraga navigasi dapatkan param, ada , ID produk adalah

81
00:08:08,010 --> 00:08:17,250
parameter yang dapat kami perbaiki untuk mengambil dan jika ID prod diatur, maka saya tahu kami berada dalam mode edit

82
00:08:17,250 --> 00:08:24,060
dan kemudian saya tentu saja ingin mengisi kembali bidang saya di sini dengan nilai-nilai.

83
00:08:24,190 --> 00:08:31,870
Sekarang sebenarnya, itu berarti saya ingin memuat produk saya berdasarkan ID prod dari negara Redux saya.

84
00:08:31,870 --> 00:08:47,340
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

85
00:08:47,340 --> 00:08:51,170
dan Anda selalu dapat memeriksa peredam jika Anda tidak yakin

86
00:08:51,210 --> 00:08:56,640
bagaimana itu terstruktur lagi dan di sana, kita melihat di bagian produk peredam kami,

87
00:08:56,640 --> 00:09:01,740
dari toko Redux kami, saya harus mengatakan, kami memiliki array produk pengguna pada

88
00:09:01,800 --> 00:09:06,180
akhirnya, jadi itulah yang saya tertarik di sini, saya menjangkau produk

89
00:09:06,270 --> 00:09:07,820
pengguna dan sekarang

90
00:09:07,850 --> 00:09:13,870
saya ingin mencari produk dengan ID produk itu. Jadi di sini, saya akan melihat setiap

91
00:09:13,870 --> 00:09:19,060
produk, fungsi find melakukan ini untuk saya dan saya ingin mengembalikan true jika ID

92
00:09:19,060 --> 00:09:24,330
produk yang saya lihat sama dengan ID produk yang saya ambil dari parameter saya.

93
00:09:24,730 --> 00:09:29,710
Sekarang tentu saja kadang-kadang ini tidak akan menghasilkan apa pun jika ID prod tidak

94
00:09:29,710 --> 00:09:36,370
disetel karena parameter ini tidak disetel yang selalu menjadi kasus ketika kita mengklik tombol add ini, maka parameter ini

95
00:09:36,370 --> 00:09:44,620
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

96
00:09:44,620 --> 00:09:50,470
diedit tidak ditentukan, jika diatur oleh karena itu, kita tahu kita berada dalam mode

97
00:09:50,470 --> 00:09:58,210
edit dan karena itu kita dapat mempopulasikan nilai-nilai kita. Oleh karena itu sebenarnya saya akan melakukan ini terlebih dahulu sebelum saya menginisialisasi keadaan

98
00:09:58,230 --> 00:10:03,120
saya karena itu adalah sesuatu yang ingin saya inisialisasi tergantung pada apakah kita memuat suatu produk atau tidak.

99
00:10:04,320 --> 00:10:09,750
Jadi judul di sini, sebenarnya di sana saya akan memeriksa apakah produk yang diedit, jika sudah diatur, jika sudah

100
00:10:09,750 --> 00:10:15,720
diatur, maka saya akan menginisialisasi judul yang akan dieditProduk. judul, kalau tidak itu akan menjadi

101
00:10:15,720 --> 00:10:21,560
string kosong dan saya akan memiliki logika yang sama untuk imageUrl di sini.

102
00:10:21,600 --> 00:10:28,980
Jadi di sini saya melakukan itu untuk imageUrl, bukan untuk harga karena harganya tidak boleh berubah tetapi

103
00:10:29,070 --> 00:10:31,250
saya akan melakukannya untuk deskripsi.

104
00:10:32,200 --> 00:10:36,520
Jadi nilai default judul, imageUrl, dan deskripsi tergantung pada apakah

105
00:10:36,520 --> 00:10:43,870
kita memiliki produk yang diedit atau tidak. Dan sekarang dengan itu, karena kita mengatur ini pada keadaan,

106
00:10:43,870 --> 00:10:48,910
ini akan secara otomatis dimasukkan ke input teks kita dan satu-satunya adalah, saya perlu memastikan

107
00:10:48,910 --> 00:10:56,490
bahwa saya menghapus input harga di sini jika kita dalam mode edit. Jadi saya akan memeriksa apakah produk yang diedit diatur di sini

108
00:10:56,490 --> 00:10:58,180
dan jika itu yang terjadi,

109
00:10:58,200 --> 00:10:59,820
maka saya akan mengembalikan

110
00:10:59,820 --> 00:11:07,380
nol di sini dan hanya sebaliknya jika tidak disetel, jadi jika saya dalam mode tambah, bukan dalam mode edit, saya akan merendernya input

111
00:11:07,380 --> 00:11:12,300
harga di sini, sehingga input harga dihapus jika kita mengedit karena saya tidak dapat mengeditnya.

112
00:11:12,400 --> 00:11:20,910
Jadi sekarang dengan itu, mari kita coba dan mari kita kembali ke layar admin. Jika saya mengklik add, ya saya perlu menambahkan

113
00:11:21,020 --> 00:11:26,990
kembali impor platform karena saya menggunakannya pada tombol header untuk memberikan tanda

114
00:11:27,040 --> 00:11:29,950
centang, ikon tergantung pada platform.

115
00:11:30,050 --> 00:11:35,150
Jadi mari kita pastikan kita mengimpor platform di layar edit produk, tetapi sekarang jika saya klik add,

116
00:11:35,150 --> 00:11:40,670
kita melihat keempat impor, semuanya kosong di awal. Jika saya mengklik edit di sisi lain, mereka sudah diisi

117
00:11:40,670 --> 00:11:43,840
sebelumnya dan saya tidak melihat input harga yang persis apa yang saya inginkan.

118
00:11:43,880 --> 00:11:48,280
Sekarang saatnya memastikan bahwa ketika kami mengirimkan ini, kami memperbarui produk

119
00:11:48,290 --> 00:11:52,770
kami jika sedang mengedit atau jika kami menambahkannya, kami menambahkan produk baru.

120
00:11:52,820 --> 00:11:56,360
Sekarang lagi, untuk saat ini saya tidak akan menambahkan validasi, kami akan melakukannya nanti.

121
00:11:56,360 --> 00:12:00,860
Jadi untuk saat ini kami juga dapat mengirimkan produk kosong, nanti setelah modul berikutnya, ini

122
00:12:00,860 --> 00:12:02,450
tidak akan mungkin lagi.