Jadi ada banyak pembicaraan, banyak hal yang dilakukan, sekarang saatnya untuk
membuat tombol ini berfungsi dan mari kita tambahkan tujuan di sini, benar dan
untuk itu
kita perlu mencari tahu apa yang dimasukkan pengguna dan setelahnya, tentu saja dengarkan satu ketukan pada
tombol dan kemudian tambahkan sasaran yang dimasukkan ke serangkaian sasaran yang harus kita kelola di suatu tempat, yang kemudian dapat kita
tampilkan di sana dalam tampilan bawah ini, benar, itulah
yang perlu kita lakukan. Sekarang dalam kursus
ini, saya akan menggunakan komponen fungsional hanya dengan fitur React hooks yang relatif baru, jadi jika
Anda belum tahu React hooks, pasti mempelajarinya terlebih dahulu, misalnya dalam React Complete Guide saya,
saya
membahas secara menyeluruh mereka tetapi terpasang Anda juga menemukan beberapa sumber daya lain
yang membantu Anda memulai dengan React hooks karena kita akan memerlukan React hooks untuk misalnya mendapatkan input pengguna.
Kami menggunakan hook useState untuk apa yang kami impor dari Bereaksi, bukan dari Bereaksi Pribumi
tetapi dari Bereaksi, ini
adalah fitur React inti dan kemudian di sini dalam komponen fungsional ini, dalam komponen aplikasi ini, kami bisa mendapatkan tujuan
yang dimasukkan dan juga mendapatkan set memasukkan fungsi sasaran untuk memperbarui keadaan dengan bantuan useState dan secara default, kami memiliki keadaan
awal yang merupakan string kosong karena pengguna belum memasukkan apa pun di awal.
Sekarang kita dapat mengikat ini ke
input teks, itu berarti ketika pengguna mengetik karakter, kita ingin memperbarui keadaan kita dan menyimpan teks yang dimasukkan
dalam keadaan di sini yang kemudian dapat kita akses melalui tujuan yang dimasukkan dan
kita akan melewati tujuan yang dimasukkan kembali ke input teks. Itu pengikatan dua arah ini, yang disebut komponen terkontrol yang juga Anda
ketahui dari Bereaksi untuk web dengan elemen input HTML normal.
Jadi di sini kita dapat mendengarkan onChangeText, sebuah prop yang disediakan oleh input teks yang mengambil fungsi yang
akan dijalankan untuk setiap penekanan tombol.
Sekarang kita dapat menyediakan fungsi inline di sini, tetapi kita juga dapat mengatur fungsi
terpisah untuk memiliki sedikit kode pembersih dan Anda dapat memiliki fungsi dalam suatu fungsi dan kita
perlu memilikinya di sini, sehingga kita dapat menggunakan status kita atau atur fungsi tujuan yang dimasukkan di sini, hanya dengan menambahkan fungsi baru di
sini, pengarah input tujuan dapat berupa nama, nama terserah Anda sekalipun. Dalam fungsi itu, kita akan mendapatkan teks yang dimasukkan
secara otomatis, yang akan diteruskan oleh Bereaksi atau oleh Bereaksi Asli di sini dan kemudian kita dapat memanggil setel tujuan yang dimasukkan
dan meneruskan teks yang dimasukkan sebagai nilai karena teks yang dimasukkan di sini akan menjadi string karena kami
menghubungkan handler input tujuan ke onChangeText hanya dengan menunjuk di sini. Nah, itu penting, jangan tambahkan tanda kurung di sana
karena ini akan menjalankan fungsi ini ketika kode ini diuraikan, jadi ketika
UI diberikan untuk pertama kalinya. Anda tidak ingin mengeksekusi ini segera, Anda
ingin mengeksekusinya pada setiap keystroke dan oleh karena itu, Anda hanya mengambil nama fungsi, Anda meneruskan
nama fungsi tersebut ke onChangeText dan yang secara efektif memberitahu React Native, hei itulah fungsi yang harus
saya jalankan untuk setiap keystroke, jadi jangan tambahkan tanda kurung di sini sehingga ini dapat berjalan pada setiap keystroke.
Sekarang alih-alih sintaks fungsi ini, Anda juga bisa menggunakan sintaks berbeda yang akan saya
gunakan sepanjang kursus, di mana Anda membuat konstanta dengan nama itu di sini dan kemudian nilai
konstanta itu setelah tanda sama dengan hanyalah sebuah fungsi menggunakan sintaks fungsi panah, jadi ini di sini adalah daftar
argumen Anda dan ini adalah fungsi tubuh. Itu sintaks Javascript normal, didukung oleh kode Javascript
React Native dapat dijalankan dan oleh karena ini sintaks yang akan saya gunakan, Anda
menghubungkannya ke onChangeText persis dengan cara yang sama seperti sebelumnya. Oke, jadi sekarang kita memiliki fungsi ini terhubung, kita memperbarui
keadaan kita dengan apa pun yang dimasukkan pengguna pada setiap penekanan
tombol, sekarang kita juga harus meneruskan teks itu kembali ke input teks, sehingga itu ditampilkan di sana dengan benar hanya
dengan mengikat properti nilai ke memasukkan tujuan, jadi ke negara kita yang akan berubah dengan setiap penekanan tombol.
Dan dengan itu, kami mendapatkan akses ke input pengguna karena sekarang akan
selalu disimpan dalam tujuan yang dimasukkan. Sekarang ketika pengguna menekan tombol, kami ingin menggunakan tujuan yang
dimasukkan, jadi untuk itu saya akan menambahkan fungsi lain di sini, tambahkan penangan tujuan dan itu hanya konvensi penamaan yang saya gunakan
untuk fungsi-fungsi ini di sini, Anda dapat memberi nama mereka apa saja Anda ingin, apa pun yang Anda
gunakan dari aplikasi Bereaksi Anda, pada akhirnya nama fungsi harus cukup menggambarkan apa yang akan terjadi dan bahwa di sini akan
menangani pers pada tombol itu yang pada akhirnya akan menambah tujuan. Di sini fungsi tidak akan mengambil argumen apa pun tetapi di badan
fungsi, saya ingin menambahkan tujuan yang dimasukkan ke daftar tujuan dan kami belum memiliki daftar, jadi untuk
saat ini yang saya lakukan di sini adalah log konsol, yang didukung di React Asli, memasukkan sasaran sehingga setidaknya kita melihat bahwa
ini disimpan dengan benar dan bahwa fungsi ini dijalankan. Untuk mengeksekusi ini, kita perlu menghubungkannya
ke tombol, di sana kita dapat menambahkan prop onPress dan menunjuk pada add
goal handler, lagi tanpa tanda kurung sehingga ini tidak dieksekusi segera tetapi hanya ketika terjadi pers.
Dan sekarang mari kita simpan semua itu dan mari kita kembali dan mari kita mungkin masuk belajar React Native dan yang baik adalah Anda dapat menggunakan keyboard asli
Anda di sini dan tekan add dan Anda akan melihat di sini di terminal Anda log ini, Anda juga akan melihat ini Ngomong-ngomong
di alat pameran Anda di sini di tab browser. Di sana, Jika Anda mengklik salah satu
perangkat yang terhubung, di mana Anda cukup mengklik tombol dalam kasus saya,
perangkat Android, maka di bagian bawah Anda juga akan melihat Belajar Bereaksi Asli.
Dan tentu saja itu juga berfungsi di iOS, pelajari semua tentang React Native, jika kita masukkan ini di sini dan klik add, maka
kita juga melihat bahwa sedang login di sini dan juga melihat bahwa di alat expo dev, jika kita mengklik iPhone di paling
bawah, kita melihat log ini. Oke jadi kita mendapatkan
input pengguna, kita menyimpannya, kita konsol logging itu, tentu saja kita
tidak ingin konsol login, kami ingin output di bawah input kami di sini, kami
ingin daftar sasaran kami di bawah bidang masukan ini. Jadi untuk itu, kita memerlukan pandangan kedua di sini yang seharusnya menampilkan daftar barang kita.
Jadi di sini antara tag pembuka dan penutup, saya ingin menampilkan semua elemen yang
kami tambahkan, semua sasaran yang kami tambahkan. Untuk itu kita pertama-tama perlu mengelola tujuan kita
dan kita dapat mengatur keadaan lain untuk itu yang awalnya adalah array kosong, maka saya melewati
array kosong sebagai nilai untuk menggunakanState dan di sana kita memiliki tujuan kursus dan tujuan kursus yang ditetapkan fungsi.
Sekarang nama-nama ini selalu terserah Anda, tetapi mereka harus menggambarkan apa yang ada di negara Anda dan bagaimana
Anda dapat memperbaruinya.
Jadi sekarang di sini ketika kita menambahkan tujuan, saya ingin memperbarui tujuan kursus saya untuk menambahkan
tujuan baru dan untuk itu, saya dapat memanggil tujuan kursus yang ditetapkan dan sekarang menetapkan tujuan kursus ke array baru di mana saya mengambil tujuan kursus lama saya dan
menambahkan baru.
Sekarang ini adalah sintaks yang mungkin tidak Anda ketahui, itulah
yang disebut operator sebar, ini adalah fitur Javascript yang mengambil array yang ada dan tujuan kursus
adalah sebuah array, ini adalah snapshot keadaan kita sebelum pembaruan dan mengeluarkan semua elemen dari itu array dan kemudian menambahkannya di sini ke
array baru yang mengapa saya memiliki tanda kurung siku, tanpa tanda kurung siku ini tidak akan
berfungsi
tetapi sekarang kita membuat array baru dan kita menambahkan semua elemen dari array lama dan sekarang kita
bisa juga tambahkan elemen baru.
Jadi di sini, saya menambahkan koma untuk
menambahkan elemen tambahan setelah semua elemen yang saya tarik di sini dan elemen yang saya tambahkan di sini adalah tujuan yang dimasukkan tentu saja.
Jadi sekarang kita memperbarui daftar tujuan kita dengan daftar tujuan lama,
awalnya daftar kosong tetapi kemudian ini akan tumbuh seiring waktu karena kita kemudian juga
menambahkan tujuan baru ketika kita menekan tombol itu. Sekarang catatan kecil, ketika bekerja dengan menetapkan tujuan kursus,
tujuan kursus di sini adalah keadaan kami sebelumnya dan cara React
memperbarui keadaan, ini harus selalu menjadi snapshot keadaan terbaru Anda tetapi tidak dijamin 100%, untuk mendapatkan jaminan 100%
, ketika Anda memperbarui negara Anda berdasarkan negara lama, Anda dapat menggunakan
bentuk fungsi dari fungsi set ini di mana Anda tidak melewati nilai negara baru Anda di sini
tetapi
sebaliknya Anda meneruskannya dalam suatu fungsi, biasanya fungsi anonim di mana Anda dapatkan status saat ini atau sasaran
saat ini, jadi potret keadaan saat ini dan kemudian Anda mengembalikan nilai yang diperbarui, jadi di sini saya
mengembalikan array saya yang diperbarui dengan sintaks fungsi panah sebaris di mana jika Anda hanya memiliki satu ekspresi, Anda dapat
menghilangkan kurung kurawal dan kembalikan pernyataan dan cukup masukkan nilai yang ingin Anda kembalikan
dan itu akan dikembalikan dan
itu semua Javascript normal di sini, tidak ada yang spesifik Bereaksi asli.
Jadi di sini, saya kemudian mengambil sasaran saya saat ini dan kemudian menambahkan sasaran yang saya masukkan. Sintaks ini sedikit lebih baik, sintaks lainnya akan
bekerja dengan baik tetapi ini dijamin akan selalu berhasil karena React
Native akan selalu melanjutkan dan memberi Anda jaminan, snapshot keadaan terbaru sebelum menerapkan perubahan status Anda
di sini.
Nah, itu bagus, sekarang kita akan memiliki daftar, serangkaian tujuan yang dikelola di sini. Bagaimana kita bisa menampilkan ini?