Handling User Input

Bagaimana cara handling user input di react native? Pada tutorial sebelumnya Koders sudah berhasil membuat aplikasi pertama dengan react native dan juga sudah mempelajari komponen-komponen dasar pada react native.

Pada tutorial kali ini Koders akan mempelajari cara menghandle user input, kita akan menggunakan aplikasi myapp yang sudah diinstall sebelumnya, tutorial bisa dilihat disini.

Alert

Alert bisa kita gunakan untuk menampilkan notifikasi atau pesan lainnya dalam bentuk pop-up, ada 2 cara untuk menampilkan alert yaitu dengan menggunakan alert javascript atau komponen Alert dari react native.

myapp/App.js

import React, {Component} from 'react';
import {StyleSheet, Text, View, Alert} from 'react-native';
 
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
          <Text style={styles.welcome} onPress={() => alert('Welcome to Koder.id\n ini JS Alert')}>Javascript Alert!</Text>
          <Text style={styles.welcome} onPress={() => Alert.alert('Koder.id', 'Welcome to Koder.id\n ini React Native Alert')}>React Native Alert!</Text>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

Hasilnya akan seperti gambar dibawah ini:

 

Dari dua alert diatas kita bisa melihat perbedaannya, yaitu title dari alert bawaan javascript tidak bisa dirubah sementara alert dari react native dapat kita custome.

TextInput – onChangeText

Textinput digunakan untuk menginput teks kedalam aplikasi, selebihnya baca disini.

myapp/App.js

import React, {Component} from 'react';
import {StyleSheet, Text, View, Alert} from 'react-native';
 
export default class App extends Component {
 
    constructor(props) {
        super(props);
        this.state = { text: '' };
    }
 
    onSubmitClicked = () => {
        let val = this.state.text
 
        if(val){
          Alert.alert('Koder.id', val)
        }else{
          Alert.alert('Koder.id', 'Silahkan isi TextInput terlebih dahulu')
        }
    }
 
    render() {
        return (
            <View style={styles.container}>
                <TextInput
                    style={{height: 40, width: '80%', borderColor: 'gray', borderWidth: 1}}
                    onChangeText={(text) => this.setState({text})}
                    value={this.state.text}
                    placeholder={'Koder.id'}
                />
                <Button title={'Submit'} onPress={() => this.onSubmitClicked()}/>
            </View>
        );
    }
}
 
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    }
});

Hasilnya jika TextInput kosong akan terkena validasi.

Submit Screen
Validasi Input
Dan berikut hasilnya ketika TextInput sudah diisi lalu button diclick.
Input Value
Value Returned

Sampai sini Koders sudah berhasil menghandle inputan dari user, selamat^^
Lalu selanjutnya apa? Pada tutorial selanjutnya kita akan belajar static CRUD menggunakan state, jika Koders belum paham dengan penggunaan state bisa lihat tutorial ini.

Penjelasan

Input handling kita gunakan untuk merespon semua aktifitas yang berasal dari user, kita bisa menggunakan fungsi onPress pada komponen react native untuk memanggil function yang sudah dibuat untuk menangani semua aktifitas user.

Author

Started coding from 3rd junior high school, 3+ years of experience in Software development using any programming language.

Pin It