Gaessssss…. pada tutorial kali ini kita akan membahas Handling Text Input pada React Native. Text Input adalah hal yang sangat dibutuhkan demi kebutuhan UI pada aplikasi kita, jadi sekarang kita akan membuat Text Input dengan menghasilkan terjemahan berupa gambar 🍕 pada React Native.
TextInput merupakan komponen dasar yang memungkinkan pengguna untuk memasukkan teks. Ini memiliki prop onChangeText yang mengambil sebuah fungsi untuk dipanggil setiap kali teks berubah, dan sebuah prop onSubmitEditing yang mengambil sebuah fungsi untuk dipanggil saat teks dikirimkan.
Misalnya, katakanlah sebagai tipe pengguna, Anda menerjemahkan kata-kata mereka ke dalam bahasa yang berbeda. Dalam bahasa baru ini, setiap kata ditulis dengan cara yang sama: 🍕. Jadi kalimat “Hello there Bob” akan diterjemahkan sebagai “🍕🍕🍕”.
Sekarang kalian buka code editor kesayangan kalian dan buka file index.android.js kalian. Disini kita akan mengubah dan menambah perintah code. Silahkan kalian tambahkan kedalam import yaitu Textinput, dan tambahkan perintah constructor props dibawah baris code export…
constructor(props) {
super(props);
this.state = {text: ''};
}
Sekarang ubah perintah View Style nya menjadi seperti berikut
<View style={{padding: 10}}>
<TextInput
style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})}
/>
<Text style={{padding: 10, fontSize: 42}}>
{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
</Text>
</View>
Oke.. sekarang silahkan refresh aplikasi pada emulator kalian, dan hasilnya akan tampil seperti ini
Sekarang silahkan kalian inputkan satu kata text apa saja, maka akan tampil satu gambar Pizza. Hasilnya akan terlihat seperti berikut
Sekarang silahkan kalian inputkan satu kata text lagi maka akan tampil satu Pizza lagi, hasilnya akan terlihat seperti berikut
Masih penasaran dengan banyak kata? :v silahkan kalian input kan lagi dengan banyak kata, dan hasilnya akan terlihat seperti berikut
Ada lebih banyak hal yang mungkin ingin Anda lakukan dengan input teks. Misalnya, Anda bisa memvalidasi teks di dalam sementara jenis pengguna. Untuk contoh yang lebih rinci, lihat dokumentasi React pada komponen terkontrol, atau dokumen referensi untuk TextInput.
Masukan teks adalah salah satu cara pengguna berinteraksi dengan aplikasi.
Oke gaessss… sekian untuk tutor Handling Text Input kali ini. Selanjutnya, kita akan masih membahas seputar Textinput dan kita akan lihat jenis input lain dan mempelajari cara menangani sentuhan.