TextInput — apa itu, input teks dan React Native

Apa itu TextInput di React Native

TextInput adalah komponen React Native yang memungkinkan pengguna memasukkan teks dari keyboard perangkat. Ini adalah blok bangunan utama untuk formulir pendaftaran, bilah pencarian, bidang input pesan, dan skenario lain yang memerlukan input pengguna. Berbeda dengan pengembangan web, di mana ada tipe input terpisah (text, email, password, search), di React Native semua varian ini diimplementasikan melalui satu komponen TextInput dengan properti yang berbeda.

TextInput mendukung dua mode kerja: terkontrol (dikelola melalui state React) dan tidak terkontrol (dengan ref). Dalam mode terkontrol, nilai bidang disimpan dalam state komponen dan diperbarui melalui callback onChangeText. Pendekatan ini direkomendasikan untuk sebagian besar aplikasi, karena menyediakan sumber kebenaran tunggal dan menyederhanakan validasi.

Menurut React Native Handling Text Input, 2024, TextInput secara otomatis beradaptasi dengan platform: di iOS menggunakan UITextField asli, di Android — EditText. Ini memastikan berfungsinya penggantian otomatis, koreksi otomatis, dan menu sistem (potong/salin/tempel) tanpa konfigurasi tambahan.

Properti dan API komponen TextInput

TextInput menyediakan serangkaian properti yang luas untuk mengelola input, tampilan, dan perilaku. Semua properti dibagi menjadi beberapa kategori: manajemen nilai, jenis keyboard, styling, event, dan fitur platform.

Properti manajemen nilai

value — nilai saat ini dari bidang (untuk mode terkontrol). onChangeText — callback yang dipanggil pada setiap perubahan teks. placeholder — teks petunjuk yang ditampilkan saat bidang kosong. defaultValue — nilai awal untuk mode tidak terkontrol. maxLength membatasi jumlah maksimum karakter yang dapat dimasukkan pengguna.

Event TextInput

Komponen mendukung onFocus (bidang menerima fokus), onBlur (bidang kehilangan fokus), onSubmitEditing (pengguna menekan Enter/Return), onKeyPress (tekanan tombol). Event onEndEditing dipanggil setelah selesai mengedit saat kehilangan fokus. Callback ini memungkinkan implementasi logika validasi dan pengiriman formulir yang kompleks.

Properti platform

Di iOS tersedia: clearButtonMode (tombol hapus), keyboardAppearance (keyboard terang/gelap), returnKeyType (tipe tombol Return), enablesReturnKeyAutomatically. Di Android tersedia: textContentType (isi otomatis), underlineColorAndroid, inlineImageLeft. secureTextEntry berfungsi di kedua platform untuk input kata sandi.

Input terkontrol dan tidak terkontrol

Di React Native, TextInput dapat beroperasi dalam dua mode. Dalam mode terkontrol, React mengelola nilai bidang: Anda mengirimkan value dari state dan memperbaruinya melalui onChangeText. Dalam mode tidak terkontrol, React hanya menginisialisasi bidang, sedangkan nilai seperti DOM disimpan di dalam komponen asli.

TextInput terkontrol

Mode terkontrol direkomendasikan untuk semua formulir yang memerlukan validasi, pemfilteran, atau pemformatan data yang dimasukkan. Status bidang disinkronkan dengan state komponen React, memberikan kontrol penuh atas nilai.

const LoginForm = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    return (
        <View>
            <TextInput
                placeholder="Email"
                value={email}
                onChangeText={setEmail}
                keyboardType="email-address"
                autoCapitalize="none"
            />
            <TextInput
                placeholder="Password"
                value={password}
                onChangeText={setPassword}
                secureTextEntry
                maxLength={32}
            />
        </View>
    );
};

Dalam contoh ini, kedua bidang menggunakan mode terkontrol. Email memiliki jenis keyboard email-address dan kapitalisasi otomatis dimatikan. Kata sandi menggunakan secureTextEntry untuk menyembunyikan karakter yang dimasukkan dan dibatasi hingga 32 karakter melalui maxLength.

TextInput tidak terkontrol

Mode tidak terkontrol cocok untuk bidang sederhana di mana validasi atau reaksi langsung terhadap input tidak diperlukan. Nilai bidang diambil melalui ref pada saat pengiriman formulir.

const SimpleSearch = () => {
    const inputRef = useRef(null);

    const handleSearch = () => {
        console.log(inputRef.current.value());
    };

    return (
        <TextInput
            ref={inputRef}
            placeholder="Search..."
            onSubmitEditing={handleSearch}
        />
    );
};

Dalam mode tidak terkontrol, komponen render lebih cepat, karena tidak memerlukan sinkronisasi status pada setiap perubahan teks. Namun, Anda kehilangan kemampuan untuk memfilter, memformat, atau memvalidasi input secara real-time.

Jenis keyboard dan fitur platform

TextInput mendukung berbagai jenis keyboard yang menyesuaikan tata letak dengan format input yang diharapkan. Memilih jenis keyboard yang tepat meningkatkan pengalaman pengguna dan mengurangi jumlah kesalahan input pada perangkat seluler.

Di iOS tersedia jenis tambahan: numbers-and-punctuation (angka dan tanda baca), twitter, web-search (dengan pencarian suara). Di Android juga tersedia visible-password (menampilkan kata sandi). Pemilihan keyboardType yang tepat adalah aspek penting dari UX aplikasi seluler.

Fitur platform juga mencakup autoCapitalize (kapitalisasi otomatis kata pertama), autoCorrect (koreksi otomatis), spellCheck (pemeriksaan ejaan), textContentType (isi otomatis di iOS). Properti ini bekerja berbeda di setiap platform dan memerlukan pengujian.

Contoh praktis dengan TextInput

Mari kita lihat dua skenario nyata: bidang multi-baris untuk input pesan dan bidang dengan input nomor telepon yang dimasukkan. Keduanya menggunakan TextInput dengan properti yang berbeda untuk mencapai perilaku yang diinginkan.

Contoh 1: bidang multi-baris untuk pesan

Untuk memasukkan teks panjang (komentar, deskripsi), TextInput beralih ke mode multi-baris melalui properti multiline. Dalam mode ini, bidang tumbuh secara vertikal dan mendukung pemutusan baris.

const MessageInput = ({ onSend }) => {
    const [text, setText] = useState('');

    return (
        <TextInput
            style={styles.input}
            multiline
            numberOfLines={4}
            placeholder="Write a message..."
            value={text}
            onChangeText={setText}
            textAlignVertical="top"
        />
    );
};

Properti multiline mengaktifkan mode multi-baris, numberOfLines mengatur tinggi awal dalam baris. textAlignVertical: 'top' meratakan teks ke tepi atas (secara default di Android, TextInput multi-baris memusatkan teks secara vertikal).

Contoh 2: bidang dengan pemformatan nomor telepon

Untuk memasukkan nomor telepon, seringkali diperlukan pemformatan real-time. Dengan menggabungkan onChangeText dengan ekspresi reguler, masker input dapat diimplementasikan.

const PhoneInput = () => {
    const [phone, setPhone] = useState('');

    const formatPhone = (text) => {
        const cleaned = text.replace(/\D/g, '');
        if (cleaned.length <= 11) {
            return cleaned.replace(
                /(\d{1})(\d{3})(\d{3})(\d{2})(\d{2})/,
                '+$1 ($2) $3 $4 $5'
            );
        }
        return cleaned;
    };

    return (
        <TextInput
            keyboardType="phone-pad"
            value={phone}
            onChangeText={(t) => setPhone(formatPhone(t))}
            placeholder="+7 (999) 123 45 67"
            maxLength={20}
        />
    );
};

Fungsi formatPhone menghapus semua karakter non-angka dan memformat nomor dalam format internasional standar. keyboardType: 'phone-pad' menampilkan keyboard telepon. Pendekatan ini meningkatkan UX untuk memasukkan nomor telepon dan mencegah kesalahan pemformatan.