Cara Menerapkan Form Local State Pada React Native

 


Postingan kali ini akan membahas bagaimana cara mengolah pengiriman data dari form React Native menggunakan state

Hooks yang akan kita gunakan kali ini adalah useState. Pastikan kalian sudah mengimportnya dari library 'react'

Langkah Langkah

Definisikan useState menggunakan const dengan kode dibawah ini

Coba saya jelaskan apa sih maksud email dan setEmail diatas

email (sebenarnya bisa menggunakan nama apapun) adalah sebuah value yang nilainya bisa berubah ubah atau mendefinisikan state yang ingin kita gunakan

setEmail, adalah fungsi yang memungkinkan kita mengubah value dari email ini

Untuk kasus yang lebih luas lagi, kita bisa menamakan email dan setEmail dengan konteks kasus kita. Seperti data dan setData, payment dan setPayment.

Lalu berikan props pada component

 

Props yang diberikan adalah value dan onChangeText. 

value akan berisi state

onChangeText adalah props yang berisi fungsi yang akan mengubah, mengolah value yang berisi state. Semisal kita mengetikan "abcdefgh..." maka state itu akan berubah menjadi "abcdefgh..."

Tambahkan ...props agar props apapun  yang kita tambahkan bisa terpakai

...props berguna agar segala props yang kita tuliskan bisa digunakan pada component lain. Jadi kita ga perlu capek capek menuliskannya sebagai obejct parameter. Namun cukup dengan kode dibawah saja

Buat tombol sign in yang akan menjalankan fungsi onSubmit


onSubmit disini kita belum meng-authentication nya dengan API, namun kita akan membuktikan apakah state ini berhasil mengirimkan nilai/data

Lalu pasang function diatas didalam sebuah props yang bernama onPress sehingga sewaktu waktu ketika kita mengklik tombol SignIn function diatas akan berjalan


 

Nyalakan React Native Debugger


 

Tekan CTRL + M di emulator android dan pilih Debug maka React Native Debugger akan berjalan lalu lihat log dengan cara klik kanan, Inspect, dan pilih Console

Lalu coba klik tombol Sign In dan lihat apakah state kita berhasil mengirimkan data

 



Kesimpulan

 Dari sini kita memahami dasar dasar menggunakan hooks useState untuk mengirimkan data. Ketika aplikai menjadi rumit kita tentu membutuhkan tool


Comments

Video Baru!