1 00:00:02,330 --> 00:00:09,590 Jadi tombol add di sini memanggilAddGoal dan pada dasarnya meneruskan tujuan ke aplikasi. js yang persis apa yang kita butuhkan tetapi apa 2 00:00:09,590 --> 00:00:10,860 yang juga perlu 3 00:00:11,030 --> 00:00:16,660 kita lakukan adalah kita perlu memastikan bahwa ketika kita menambahkan tujuan baru, modal ditutup. 4 00:00:16,700 --> 00:00:22,790 Sekarang perlu diingat bahwa kita pada akhirnya mengontrol visibilitas modal dari dalam aplikasi. File js karena di sana, kita 5 00:00:22,790 --> 00:00:29,690 memiliki status isAddMode yang kita ubah ketika kita mengklik tombol ini di sini, tambahkan tombol 6 00:00:29,690 --> 00:00:31,050 tujuan baru 7 00:00:31,220 --> 00:00:38,900 misalnya dan nilai status ini, isAddMode diteruskan ke input tujuan di mana kita kemudian menggunakannya untuk 8 00:00:38,900 --> 00:00:40,310 mengontrol visibilitas modalnya. 9 00:00:40,340 --> 00:00:46,580 Jadi untuk memastikan bahwa modal menghilang, kita hanya perlu mengubah isAddMode 10 00:00:46,580 --> 00:00:52,270 lagi di dalam aplikasi. File js karena nilai baru kemudian secara otomatis akan diteruskan ke input tujuan. 11 00:00:52,310 --> 00:00:56,990 Jadi yang harus kita lakukan adalah menambahkan handler tujuan di mana kita menetapkan tujuan kursus, kita 12 00:00:56,990 --> 00:01:03,920 juga harus menetapkan isAddMode ke false karena kita sudah selesai menambahkan. Sekarang sedikit catatan, cara Bereaksi bekerja jika Anda menetapkan dua negara 13 00:01:03,920 --> 00:01:06,500 setelah satu sama lain, itu akan batch 14 00:01:06,590 --> 00:01:08,230 ini bersama-sama, itu tidak akan 15 00:01:08,270 --> 00:01:14,060 merender ulang komponen dua kali setelah perubahan pertama dan setelah perubahan kedua, sebaliknya itu pada dasarnya akan berlaku 16 00:01:14,060 --> 00:01:19,460 semua perubahan negara sekaligus dan hanya merender ulang komponen yang tentu saja baik, jika tidak kita 17 00:01:19,460 --> 00:01:20,110 akan 18 00:01:20,120 --> 00:01:23,240 memiliki siklus render ulang yang tidak perlu di sana 19 00:01:23,240 --> 00:01:29,960 dan ini hanyalah optimasi yang bagus React lakukan untuk kita. Jadi kita benar-benar dapat mengubah dua keadaan berbeda setelah satu sama lain 20 00:01:29,990 --> 00:01:31,760 seperti ini dan dengan itu, 21 00:01:31,760 --> 00:01:38,740 modal seharusnya tahu benar-benar juga menghilang jika kita menetapkan ini sebagai false. Mari kita coba di sini 22 00:01:38,740 --> 00:01:40,430 di iOS. 23 00:01:40,480 --> 00:01:46,320 Jika saya menambahkan pelajari Bereaksi Asli di sini, klik tambahkan, ini menghilang 24 00:01:46,420 --> 00:01:52,530 dan sekarang pelajari lebih lanjut, ini juga berfungsi dan saya juga masih 25 00:01:52,530 --> 00:01:54,510 dapat menghapus item. 26 00:01:54,740 --> 00:01:58,910 Sekarang untuk menguji ini di Android, prosedur yang sama seperti sebelumnya, mari 27 00:01:59,060 --> 00:02:01,310 kita benar-benar memulai kembali ini 28 00:02:05,490 --> 00:02:11,840 di Android, klik tambahkan tujuan baru dan pelajari Bereaksi Asli di sini, klik tambahkan dan tutup ini, 29 00:02:11,850 --> 00:02:23,740 sekarang mari kita juga belajar lebih banyak di sini, seperti ini dan ini juga berfungsi benar. Sekarang dua perbaikan kecil yang masih ingin saya terapkan, untuk satu saya ingin menghapus input 30 00:02:23,740 --> 00:02:29,800 begitu kita selesai dan di samping itu, saya ingin memberikan tombol batal, sehingga sebagai ganti 31 00:02:29,800 --> 00:02:36,550 daripada menambahkan ini, kita juga bisa membatalkan di sini untuk menutup modal tanpa menambahkan item karena saat 32 00:02:36,610 --> 00:02:40,290 ini, itu bukan sesuatu yang bisa kita lakukan. 33 00:02:40,300 --> 00:02:43,300 Mari kita mulai dengan membersihkan input kita 34 00:02:43,300 --> 00:02:48,480 di sini setelah kita memasukkan sesuatu. Untuk itu di input sasaran, pada akhirnya, kami 35 00:02:48,480 --> 00:02:49,530 memasukkan sasaran itu 36 00:02:49,560 --> 00:02:56,370 dan kami perlu mengatur ulang ini setelah kami menambahkan sasaran baru. Sekarang tentu saja, kami menambahkan tujuan baru ketika kami menekan 37 00:02:56,370 --> 00:03:01,690 tombol tambah itu dan di sana pada akhirnya, kami memicu fungsi yang kami dapatkan dengan bantuan prop onAddGoal. 38 00:03:01,700 --> 00:03:07,110 Sekarang juga untuk menghapus input kami, yang dapat kami lakukan di sini adalah kami dapat 39 00:03:07,290 --> 00:03:12,440 menambahkan fungsi di dalam komponen input tujuan, menambahkan goal handler atau apa pun yang 40 00:03:12,560 --> 00:03:19,310 Anda ingin menyebutnya, ini adalah fungsi yang tidak harus mengambil argumen dan pada akhirnya, sekarang fungsi ini yang ingin 41 00:03:19,310 --> 00:03:20,270 saya picu. 42 00:03:20,300 --> 00:03:23,330 Jadi saya ingin memicu add handler 43 00:03:23,360 --> 00:03:29,660 tujuan, jadi fungsi saya sendiri di komponen ini. Sekarang di sini, saya ingin memanggil props onAddGoal tanpa 44 00:03:29,660 --> 00:03:35,630 mengikat di sini, kita bisa menyebutnya seperti ini karena ketika fungsi ini berjalan, saya ingin menjalankannya, di sini 45 00:03:35,630 --> 00:03:39,340 kita hanya melewati pointer pada fungsi ini tanpa tanda kurung, jadi 46 00:03:39,340 --> 00:03:44,270 di sini kita tidak boleh memiliki tanda kurung untuk tidak mengeksekusi ini terlalu dini, 47 00:03:44,270 --> 00:03:49,460 di sini kita benar-benar membutuhkan tanda kurung karena ini hanya berjalan ketika fungsi ini dijalankan 48 00:03:49,460 --> 00:03:52,340 dan saat itulah saya ingin memicu fungsi 49 00:03:52,340 --> 00:03:59,000 dalam komponen induk saya, jadi dalam komponen aplikasi di sini. Dan di sini untuk onAddGoal, tentu saja saya masih ingin meneruskan tujuan yang 50 00:03:59,000 --> 00:03:59,390 saya 51 00:03:59,390 --> 00:04:03,770 masukkan di sini, jadi keadaan ini, saya ingin meneruskan ini tetapi setelah itu, saya juga ingin menghapusnya. 52 00:04:04,010 --> 00:04:06,140 Jadi setelah itu, saya akan menetapkan lagi 53 00:04:06,140 --> 00:04:10,930 sasaran yang dimasukkan ke string kosong yang akan mengatur ulang teks yang kita masukkan di sini. 54 00:04:10,970 --> 00:04:12,120 Jadi itu satu 55 00:04:12,140 --> 00:04:18,770 hal, yang lain adalah tombol yang memungkinkan kita untuk menutup ini dan untuk itu, kita dapat menambahkan tombol di sini dan 56 00:04:18,950 --> 00:04:22,100 tombol itu dapat memiliki judul batal karena pada akhirnya apa 57 00:04:22,100 --> 00:04:23,990 yang harus dilakukan tombol ini dan 58 00:04:23,990 --> 00:04:24,880 untuk membatalkan 59 00:04:24,890 --> 00:04:29,410 tombol, mungkin menyenangkan untuk tidak harus default warna biru tetapi ubah warna itu dan 60 00:04:29,420 --> 00:04:33,410 Anda dapat melakukan ini dengan menambahkan prop warna di sini, misalnya kita 61 00:04:33,410 --> 00:04:39,250 bisa mengatur ini menjadi merah di sini karena merah menurut saya adalah warna yang bagus untuk membatalkan tombol. 62 00:04:40,850 --> 00:04:44,960 Jika kami menyimpan ini dan kami mengujinya di sini di iOS, 63 00:04:44,960 --> 00:04:47,540 kami melihat tombol batal dan dan 64 00:04:47,690 --> 00:04:55,300 tombol tambah dan sekarang jika saya mempelajari Bereaksi Asli di sini dan saya menambahkan ini, ini ditambahkan dan jika saya 65 00:04:55,300 --> 00:05:02,830 buka kembali ini, Anda lihat sudah dihapus dan batal tentu saja tidak melakukan apa-apa karena kita harus menghubungkan batal ke 66 00:05:02,950 --> 00:05:06,280 komponen aplikasi tempat kita mengontrol visibilitas dengan mengendalikan isAddMode. 67 00:05:07,330 --> 00:05:16,090 Jadi di sini, kita juga dapat menambahkan fungsi penangan lain di komponen aplikasi sekarang, membatalkan penangan tujuan tambahan atau sesuatu seperti itu, itu adalah nama yang 68 00:05:16,120 --> 00:05:16,870 sangat panjang, 69 00:05:16,870 --> 00:05:21,040 saya hanya ingin menjadi jelas tentang apa ini dan kapan itu disebut. 70 00:05:21,040 --> 00:05:26,800 Jadi di sini, kita memiliki penangan tujuan tambahan yang dibatalkan dan pada akhirnya di sini, kita dapat dengan 71 00:05:26,800 --> 00:05:28,540 mudah mengatur isAddMode menjadi 72 00:05:29,050 --> 00:05:31,020 false yang akan menutup modal dan 73 00:05:31,030 --> 00:05:36,550 tentu saja kita tidak melakukan hal lain, kita tidak mengubah tujuan kursus kita karena kita membatalkan penambahan 74 00:05:36,550 --> 00:05:38,590 dan sekarang, kita bisa meneruskan ini ke 75 00:05:38,650 --> 00:05:45,580 item tujuan, ke input tujuan, jadi ke komponen kami di sini. Di sana kita dapat menambahkan prop onCancel, nama prop itu tentu 76 00:05:45,580 --> 00:05:48,330 saja terserah Anda karena itu prop Anda 77 00:05:48,580 --> 00:05:53,710 sendiri pada komponen Anda sendiri dan saya telah meneruskan pointer di membatalkan handler penambahan tujuan 78 00:05:54,000 --> 00:05:59,480 ke onCancel dan sekarang di dalam input tujuan, kami dapat memicu onCancel setelah menekan tombol ini. 79 00:05:59,500 --> 00:06:04,990 Jadi di sini, kami menambahkan onPress dan kami ingin memicu alat peraga. onCancel di sini, jadi 80 00:06:04,990 --> 00:06:12,690 fungsi yang kami terima di prop onCancel kami. Dengan itu, tombol batal harus bekerja, ya berfungsi 81 00:06:12,770 --> 00:06:14,260 dengan baik. 82 00:06:14,510 --> 00:06:17,830 Sekarang ini juga harus bekerja di Android tetapi 83 00:06:17,900 --> 00:06:19,310 untuk mengujinya, 84 00:06:19,310 --> 00:06:22,930 prosedur yang sama seperti biasa, mari kita tutup dan 85 00:06:22,940 --> 00:06:31,340 restart dan setelah itu, mari kita lihat apakah membersihkan input berfungsi. Jika saya masuk atau belajar Bereaksi Asli di sini, klik tambahkan, ya itu 86 00:06:31,340 --> 00:06:33,330 kosong dan batal juga berfungsi. 87 00:06:33,350 --> 00:06:38,300 Sekarang mengenai gaya di sini di Android, akan menyenangkan untuk memiliki jarak antar 88 00:06:38,390 --> 00:06:43,150 tombol atau sebenarnya di kedua platform, mungkin memiliki tombol-tombol ini duduk bersebelahan.