Apakah kamu berhasil?
Mari lakukan bersama.
Mari kita membuat komponen baru di sini di input tujuan dengan mengimpor Bereaksi dari React dan kemudian di
sini, saya akan memberi nama input
tujuan ini dan saya hanya suka sintaks konstan ini di sini, Anda bisa menggunakan input tujuan fungsi
untuk membuat komponen fungsional Anda, itu akan baik-baik saja terlalu. Lalu di sini, saya akan mengekspor input sasaran default dan sekarang
di sini, kita perlu mengembalikan sesuatu dan ada sesuatu
pada akhirnya dengan input teks dan tombol.
Jadi, izinkan saya ambil seluruh tampilan itu, kembalikan di sini di antara tanda kurung sehingga ini ditulis dalam beberapa baris dan diformat
dengan baik dan tentu saja, kita sekarang perlu mengimpor lagi barang dari Bereaksi Asli karena kami menggunakan beberapa komponen
dari Bereaksi Asli , kami menggunakan komponen view, kami menggunakan komponen input teks, kami
menggunakan komponen tombol dan saya juga ingin menggunakan komponen stylesheet untuk
mengatur objek stylesheet saya.
Jadi untuk itu, mari kita tambahkan gaya di sini dengan Stylesheet. membuat, meneruskan objek ke Stylesheet itu. buat metode dan tentu
saja ambil gaya dari aplikasi. File js, yang akan menjadi wadah input dan input,
jadi potong keduanya sehingga hanya layar yang tersisa di sini dan kembali dalam input tujuan, saya akan
menambahkan keduanya di sini ke stylesheet saya sehingga ini akan berfungsi lagi. Apa yang tidak berfungsi saat ini adalah ketika
kita mengetuk tombol, kita menambahkan ini karena di sini, kita tidak memiliki status dalam input tujuan dan ketika saya mengetuk tombol, saya sebenarnya
ingin melakukan sesuatu di app. js.
Jadi pertama-tama, kita perlu memecah negara. Sasaran yang dimasukkan tidak boleh dikelola dalam aplikasi. js tetapi harus dikelola
dalam input tujuan karena di situlah kami memiliki input teks
pada akhirnya yang mana pengguna memasukkan tujuan. Jadi mari kita tambahkan import useState di sini di input tujuan dan kemudian
tambahkan logika manajemen negara kita di sini dengan target yang dimasukkan dan setel tujuan yang kita dapatkan dari useState yang kita inisialisasi dengan string kosong, mari kita
tambahkan di sini untuk input tujuan dan dari aplikasi. File js, saya juga akan mengambil input handler
tujuan, memotongnya dari sana dan menambahkannya ke input tujuan di sini,
jadi fungsi ini dalam fungsi yang kita sambungkan ke onChangeText dan sekarang dengan itu, mengambil input pengguna
harus bekerja lagi.
Sekarang untuk tombol, ketika kita menekan ini, saya ingin memicu fungsi di aplikasi. js, saya ingin memicu add handler tujuan dan fungsi itu harus tetap
di sini karena saya perlu mengelola daftar di sini karena aplikasi. File js adalah satu-satunya komponen yang
akan memiliki akses ke input tujuan dan FlatList tempat kami menampilkan tujuan dan berbicara tentang
itu, kami sudah dapat mengimpor input tujuan di sana di app. js dari input tujuan komponen dan menambahkan
input sasaran sebagai komponen di sini di atas FlatList tetapi sekali lagi, sekarang kita harus dapat
mengetahui kapan tombol ditekan dalam komponen ini dan di
Bereaksi, Anda melakukannya dengan melewati fungsi yang anak komponen harus dieksekusi akhirnya sebagai penyangga
komponen anak.
Jadi di sini, kita bisa menambahkan diAddGoal, nama itu sepenuhnya terserah Anda, itu
adalah prop yang
Anda definisikan dan poin ini di add goal handler.
Ini saja tidak akan melakukan apa pun kecuali onAddGoal sekarang akan diterima sebagai prop di dalam input tujuan dan itu akan
menunjuk pada suatu fungsi, yang berarti kita dapat menjalankannya sebagai fungsi di sana.
Jadi dalam input tujuan, di sana di media, saya bisa
langsung menunjuk ke prop. diAddGoal, bukan?
Karena onAddGoal adalah nama prop yang saya setting di sini di app. File js, yang diterima di dalam input
tujuan pada objek props yang kita dapatkan di setiap komponen fungsional dan onAddGoal menunjuk pada suatu fungsi,
sehingga kita dapat meneruskannya ke onPress sehingga onPress
atau React Native karena itu tahu bahwa ia harus memanggil fungsi ini ketika kami menekan
tombol,
itulah cara Anda melakukan ini di Bereaksi Asli.
Masih kami akan mengalami masalah karena dalam add handler tujuan, saya mengacu pada sasaran yang dimasukkan dan yang sebelumnya dikelola di sini
tetapi tidak lagi, kami mengelola sasaran yang
dimasukkan yang merupakan input teks yang dimasukkan oleh pengguna dalam sasaran masukan sekarang dan bukan di
aplikasi. js.
Jadi tambahkan handler tujuan seharusnya sekarang menerima argumen yang merupakan judul tujuan atau apa pun yang Anda ingin
beri
nama, nama ini terserah Anda dan itulah yang kami simpan sebagai nilai di sini.
Sekarang kita harus memastikan bahwa kita meneruskan argumen ini ketika pada add goal dieksekusi di input goal.
Jadi itu terjadi di sini pada pers dan di sana kita hanya menunjuk ini untuk juga mengatur
argumen yang akhirnya harus diteruskan, kita mendapatkan
dua opsi, opsi pertama adalah kita mengatur fungsi panah anonim di sini.
Sekarang fungsi panah ini akan dieksekusi pada akhirnya dan karena itu sekarang kita dapat menambahkan
tanda kurung di sini
karena ini sekarang tidak akan dieksekusi ketika ini diberikan terlebih dahulu, sebaliknya fungsi panah ini akan
didaftarkan sebagai fungsi yang
akan dieksekusi untuk onPress dan sekarang di sini diAddGoal, kita dapat meneruskan tujuan yang dimasukkan misalnya, yang akan berfungsi atau
sebagai alternatif, kita tidak menggunakan pendekatan fungsi panah anonim ini dan karenanya kita tidak
dapat menambahkan tanda kurung di sini tetapi kemudian kita dapat menggunakan fitur Javascript lain, pada fungsi yang dapat kita panggil untuk
pra-konfigurasi beberapa argumen yang akhirnya harus diteruskan ketika fungsi ini dijalankan.
Argumen pertama selalu untuk apa kata kunci ini harus merujuk.
Ini tidak masalah bagi kami di sini, jadi kami hanya bisa menulis ini tetapi argumen kedua
di sini atau semua argumen lainnya sesudahnya sebenarnya akan menjadi argumen yang diterima oleh fungsi ini ketika dipanggil
dan dipanggil pada tombol tekan.
Jadi ini sekarang adalah argumen yang diteruskan ke fungsi onAddGoal yang pada akhirnya hanyalah fungsi add goal
handler kita dan di sana, kita perlu judul gol, jadi kita perlu
meneruskan ini, jadi
oleh karena itu di sini, sekarang saya dapat mengatur enter Tujuan sebagai argumen yang akan diteruskan
dan itu normal sintaksis Javascript vanilla di sini.
Dan sekarang dengan ini, semakin diterjemahkan, itu terlihat bagus dan
jika saya masuk
belajar React Native, masih mendapatkan hasil di sini. Sehingga semua berfungsi tetapi sekarang kami membagi
aplikasi ini menjadi beberapa komponen yang biasanya Anda lakukan di Bereaksi aplikasi dan Bereaksi aplikasi asli
seperti yang Anda lakukan di Bereaksi untuk aplikasi web karena itu membuat komponen Anda lebih ramping, lebih
fokus dan kode Anda lebih terorganisir dan lebih mudah dimengerti.