Devy Ferdiansyah, M. Kom

Kumpulan BLOG dan VLOG Pribadi Koe

Membuat Text Input

1 min read

Textfield atau textbox adalah bagian dari form yang paling sering kita gunakan dalam setiap pembuatan sistem atau program baik itu web, desktop ataupun mobil application. Fungsinya adalah menerima isian berupa teks, teks nya dapat barupa huruf angka, karakter khus ataupun gabungan dari ketiganya.

Ada berapa trigger ataupun properties dari atribut dari objek textbox, diantaranya adalah “onChangeText“. Fungsi atribut ini adalah memberikan efek sesuatu ketika ada perubahan dari objek teks itu sendiri, apakah dimasukkan sebuah karakter ataupun dikembalikan kedalam bentuk kosong seperti semula.

Sebagai contoh, berikut adalah baris kode yang dapat mewakili perumpamaan bagaimana fungsi onChangeText digunakan :

 

import React, { Component } from 'react';
import { Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && 'TES').join(' ')}
        </Text>
      </View>
    );
  }
}

Pada contoh program diatas kita bisa liat bagaimana bila sebuah kata dimasukkan maka secara otomatis akan mucul sebuah kata “TES” dan bila dipisahkan dengan spasi dan diketikkan kembali kata selanjutnya maka secara otomatis kembali akan dimunculkan kata “TES” selanjutnya, mari kita ketikkan kata “Belajar React Native” maka akan muncul kata “TES TES TES” seperti tampilan berikut ini:

Selamat mencoba…

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *