Handling User Input

TextInput adalah Core Component yang memungkinkan user menginput teks. TextInput memiliki prop onChangeText yang akan dipanggil setiap kali teks berubah, dan prop onSubmitEditing yang akan dipanggil Ketika teks di submit.

Ada lebih banyak hal yang mungkin Anda bisa lakukan dengan TextInput. Misalnya Anda dapat memvalidasi teks saat user mengetik. Contoh yang lebih detail, lihat document React tentang controlled components atau dokumen referensi untuk TextInput.

Praktikum: TextInput

Contoh 1 :

Handling User Input

Contoh 2 :

Buat aplikasi terdiri atas TextInput dan Text, Saat user mengetik, aplikasi menterjemahkan kata-kata user ke dalam bahasa yang berbeda. Dalam bahasa baru ini, setiap kata ditulis dengan cara yang sama yaitu: 🍕. Jadi setiap kalimat misalnya,”Halo apa kabar” akan diterjemahkan menjadi “🍕 🍕 🍕”. Gunakan expo.io untuk mengerjakan soal diatas.

Langkah-Langkah dalam menyelesaikan Latihan ini:
  1. Buka url https://expo.io/ dan login dengan Account Anda
  2. Setelah masuk dashboard, klik Snack
  3. Klik “New Snack” dengan nama “LatihanTextInput”
  4. Pada file App.js, hapus semua source code yang ada
  5. Pada Snack ketik perintah seperti yang ditampilkan pada slide berikutnya.
  6. Dalam kode program dibawah, teks disimpan di dalam state, kr selalu berubah
Handling User Input

Kesimpulan

TextInput memiliki prop onChangeText yang akan dipanggil setiap kali teks berubah, dan prop onSubmitEditing yang akan dipanggil Ketika teks di submit

Sumber Referensi : reactnative.dev