Jadi tombol add di sini memanggilAddGoal dan pada dasarnya meneruskan tujuan ke aplikasi. js yang persis apa yang kita butuhkan tetapi apa
yang juga perlu
kita lakukan adalah kita perlu memastikan bahwa ketika kita menambahkan tujuan baru, modal ditutup.
Sekarang perlu diingat bahwa kita pada akhirnya mengontrol visibilitas modal dari dalam aplikasi. File js karena di sana, kita
memiliki status isAddMode yang kita ubah ketika kita mengklik tombol ini di sini, tambahkan tombol
tujuan baru
misalnya dan nilai status ini, isAddMode diteruskan ke input tujuan di mana kita kemudian menggunakannya untuk
mengontrol visibilitas modalnya.
Jadi untuk memastikan bahwa modal menghilang, kita hanya perlu mengubah isAddMode
lagi di dalam aplikasi. File js karena nilai baru kemudian secara otomatis akan diteruskan ke input tujuan.
Jadi yang harus kita lakukan adalah menambahkan handler tujuan di mana kita menetapkan tujuan kursus, kita
juga harus menetapkan isAddMode ke false karena kita sudah selesai menambahkan. Sekarang sedikit catatan, cara Bereaksi bekerja jika Anda menetapkan dua negara
setelah satu sama lain, itu akan batch
ini bersama-sama, itu tidak akan
merender ulang komponen dua kali setelah perubahan pertama dan setelah perubahan kedua, sebaliknya itu pada dasarnya akan berlaku
semua perubahan negara sekaligus dan hanya merender ulang komponen yang tentu saja baik, jika tidak kita
akan
memiliki siklus render ulang yang tidak perlu di sana
dan ini hanyalah optimasi yang bagus React lakukan untuk kita. Jadi kita benar-benar dapat mengubah dua keadaan berbeda setelah satu sama lain
seperti ini dan dengan itu,
modal seharusnya tahu benar-benar juga menghilang jika kita menetapkan ini sebagai false. Mari kita coba di sini
di iOS.
Jika saya menambahkan pelajari Bereaksi Asli di sini, klik tambahkan, ini menghilang
dan sekarang pelajari lebih lanjut, ini juga berfungsi dan saya juga masih
dapat menghapus item.
Sekarang untuk menguji ini di Android, prosedur yang sama seperti sebelumnya, mari
kita benar-benar memulai kembali ini
di Android, klik tambahkan tujuan baru dan pelajari Bereaksi Asli di sini, klik tambahkan dan tutup ini,
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
begitu kita selesai dan di samping itu, saya ingin memberikan tombol batal, sehingga sebagai ganti
daripada menambahkan ini, kita juga bisa membatalkan di sini untuk menutup modal tanpa menambahkan item karena saat
ini, itu bukan sesuatu yang bisa kita lakukan.
Mari kita mulai dengan membersihkan input kita
di sini setelah kita memasukkan sesuatu. Untuk itu di input sasaran, pada akhirnya, kami
memasukkan sasaran itu
dan kami perlu mengatur ulang ini setelah kami menambahkan sasaran baru. Sekarang tentu saja, kami menambahkan tujuan baru ketika kami menekan
tombol tambah itu dan di sana pada akhirnya, kami memicu fungsi yang kami dapatkan dengan bantuan prop onAddGoal.
Sekarang juga untuk menghapus input kami, yang dapat kami lakukan di sini adalah kami dapat
menambahkan fungsi di dalam komponen input tujuan, menambahkan goal handler atau apa pun yang
Anda ingin menyebutnya, ini adalah fungsi yang tidak harus mengambil argumen dan pada akhirnya, sekarang fungsi ini yang ingin
saya picu.
Jadi saya ingin memicu add handler
tujuan, jadi fungsi saya sendiri di komponen ini. Sekarang di sini, saya ingin memanggil props onAddGoal tanpa
mengikat di sini, kita bisa menyebutnya seperti ini karena ketika fungsi ini berjalan, saya ingin menjalankannya, di sini
kita hanya melewati pointer pada fungsi ini tanpa tanda kurung, jadi
di sini kita tidak boleh memiliki tanda kurung untuk tidak mengeksekusi ini terlalu dini,
di sini kita benar-benar membutuhkan tanda kurung karena ini hanya berjalan ketika fungsi ini dijalankan
dan saat itulah saya ingin memicu fungsi
dalam komponen induk saya, jadi dalam komponen aplikasi di sini. Dan di sini untuk onAddGoal, tentu saja saya masih ingin meneruskan tujuan yang
saya
masukkan di sini, jadi keadaan ini, saya ingin meneruskan ini tetapi setelah itu, saya juga ingin menghapusnya.
Jadi setelah itu, saya akan menetapkan lagi
sasaran yang dimasukkan ke string kosong yang akan mengatur ulang teks yang kita masukkan di sini.
Jadi itu satu
hal, yang lain adalah tombol yang memungkinkan kita untuk menutup ini dan untuk itu, kita dapat menambahkan tombol di sini dan
tombol itu dapat memiliki judul batal karena pada akhirnya apa
yang harus dilakukan tombol ini dan
untuk membatalkan
tombol, mungkin menyenangkan untuk tidak harus default warna biru tetapi ubah warna itu dan
Anda dapat melakukan ini dengan menambahkan prop warna di sini, misalnya kita
bisa mengatur ini menjadi merah di sini karena merah menurut saya adalah warna yang bagus untuk membatalkan tombol.
Jika kami menyimpan ini dan kami mengujinya di sini di iOS,
kami melihat tombol batal dan dan
tombol tambah dan sekarang jika saya mempelajari Bereaksi Asli di sini dan saya menambahkan ini, ini ditambahkan dan jika saya
buka kembali ini, Anda lihat sudah dihapus dan batal tentu saja tidak melakukan apa-apa karena kita harus menghubungkan batal ke
komponen aplikasi tempat kita mengontrol visibilitas dengan mengendalikan isAddMode.
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
sangat panjang,
saya hanya ingin menjadi jelas tentang apa ini dan kapan itu disebut.
Jadi di sini, kita memiliki penangan tujuan tambahan yang dibatalkan dan pada akhirnya di sini, kita dapat dengan
mudah mengatur isAddMode menjadi
false yang akan menutup modal dan
tentu saja kita tidak melakukan hal lain, kita tidak mengubah tujuan kursus kita karena kita membatalkan penambahan
dan sekarang, kita bisa meneruskan ini ke
item tujuan, ke input tujuan, jadi ke komponen kami di sini. Di sana kita dapat menambahkan prop onCancel, nama prop itu tentu
saja terserah Anda karena itu prop Anda
sendiri pada komponen Anda sendiri dan saya telah meneruskan pointer di membatalkan handler penambahan tujuan
ke onCancel dan sekarang di dalam input tujuan, kami dapat memicu onCancel setelah menekan tombol ini.
Jadi di sini, kami menambahkan onPress dan kami ingin memicu alat peraga. onCancel di sini, jadi
fungsi yang kami terima di prop onCancel kami. Dengan itu, tombol batal harus bekerja, ya berfungsi
dengan baik.
Sekarang ini juga harus bekerja di Android tetapi
untuk mengujinya,
prosedur yang sama seperti biasa, mari kita tutup dan
restart dan setelah itu, mari kita lihat apakah membersihkan input berfungsi. Jika saya masuk atau belajar Bereaksi Asli di sini, klik tambahkan, ya itu
kosong dan batal juga berfungsi.
Sekarang mengenai gaya di sini di Android, akan menyenangkan untuk memiliki jarak antar
tombol atau sebenarnya di kedua platform, mungkin memiliki tombol-tombol ini duduk bersebelahan.