PricingLoginStart free
React Native Academy · Pelajaran

Asas TextInput dan Jenis Papan Kekunci

Papar TextInput, ikatkannya pada keadaan dengan onChangeText, konfigurasikan jenis papan kekunci untuk input e-mel atau angka dan kendalikan peristiwa kekunci Return.

Pelajaran 1 daripada 413 langkah

Asas TextInput dan Jenis Papan Kekunci ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Komponen TextInput

TextInput ialah komponen React Native untuk menangkap input papan kekunci daripada pengguna. Ia dipaparkan sebagai medan teks natif pada iOS dan Android, lalu memberikan pengalaman menaip natif platform termasuk pembetulan automatik, teks ramalan dan pintasan papan kekunci sistem. Import komponen ini daripada react-native dan gunakannya untuk sebarang input yang memerlukan papan kekunci: kotak carian, borang log masuk, medan tetapan dan penyusun mesej sembang. Tanpa gaya, TextInput tidak mempunyai sempadan yang kelihatan pada iOS — sentiasa gayakannya supaya pengguna dapat melihatnya.

import { TextInput, View, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function BasicInput() {
  const [text, setText] = useState('');

  return (
    <View style={{ padding: 16 }}>
      <TextInput
        value={text}
        onChangeText={setText}
        placeholder='Type something here...'
        style={styles.input}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 10,
    paddingHorizontal: 14,
    paddingVertical: 12,
    fontSize: 16,
    backgroundColor: '#fff',
  },
});

onChangeText berbanding onChange

Panggilan balik onChangeText ialah cara paling lazim untuk bertindak balas terhadap input teks. Ia menerima rentetan teks baharu secara terus sebagai hujah, jadi mudah untuk dihantar kepada penetap useState: onChangeText={setText}. Panggilan balik aras lebih rendah onChange menerima objek peristiwa penuh (event.nativeEvent.text) — berguna apabila anda juga memerlukan metadata peristiwa lain seperti kedudukan kursor. Bagi kebanyakan kegunaan, onChangeText lebih mudah dan disarankan. Gunakan onChange hanya apabila anda memerlukan butiran peristiwa natif.

import { TextInput } from 'react-native';
import { useState } from 'react';

function TextInputExample() {
  const [text, setText] = useState('');

  return (
    <>
      {/* Simple: receives the string directly */}
      <TextInput
        onChangeText={(newText) => setText(newText)}
        // shorthand equivalent:
        // onChangeText={setText}
      />

      {/* Advanced: receives the full event object */}
      <TextInput
        onChange={(event) => {
          console.log('text:', event.nativeEvent.text);
          console.log('selection:', event.nativeEvent.selection);
        }}
      />
    </>
  );
}

Jenis Papan Kekunci untuk Input Berbeza

Prop keyboardType mengawal varian papan kekunci yang dipaparkan oleh OS. Untuk input berangka, 'numeric' memaparkan pad nombor. Untuk e-mel, 'email-address' menyertakan kekunci @ dan . dengan jelas. 'phone-pad' memaparkan susun atur pendail telefon. 'decimal-pad' serupa dengan numeric tetapi menyertakan titik perpuluhan. 'url' memaparkan pintasan / dan .com. Menggunakan jenis papan kekunci yang betul meningkatkan kebolehgunaan — ia mengurangkan ketukan kekunci yang diperlukan untuk memasukkan data dan menghalang pengguna daripada menaip aksara yang tidak sah.

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

export default function KeyboardTypesDemo() {
  return (
    <View style={{ padding: 16, gap: 12 }}>
      <TextInput style={styles.input} keyboardType='default' placeholder='Default text' />
      <TextInput style={styles.input} keyboardType='email-address' placeholder='email@example.com' />
      <TextInput style={styles.input} keyboardType='numeric' placeholder='Enter a number' />
      <TextInput style={styles.input} keyboardType='phone-pad' placeholder='Phone number' />
      <TextInput style={styles.input} keyboardType='decimal-pad' placeholder='Price (0.00)' />
      <TextInput style={styles.input} keyboardType='url' placeholder='https://...' />
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16, backgroundColor: '#fff' },
});

Kemasukan Teks Selamat untuk Kata Laluan

Untuk medan kata laluan, tetapkan secureTextEntry={true} untuk menyembunyikan aksara yang ditaip dengan titik bulet. Ini penting bagi sebarang medan yang mengandungi data sensitif — kata laluan, PIN dan kod keselamatan. Anda boleh menambah togol tunjuk/sembunyi kata laluan dengan mengurus boolean showPassword dalam keadaan dan menogol secureTextEntry. Tetapkan juga autoCapitalize='none' dan autoCorrect={false} pada medan kata laluan — anda tidak mahu pembetulan automatik atau huruf besar mengubah kata laluan pengguna ketika mereka menaip.

import { TextInput, TouchableOpacity, Text, View, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function PasswordInput() {
  const [password, setPassword] = useState('');
  const [visible, setVisible] = useState(false);

  return (
    <View style={styles.wrapper}>
      <TextInput
        value={password}
        onChangeText={setPassword}
        secureTextEntry={!visible}
        autoCapitalize='none'
        autoCorrect={false}
        placeholder='Password'
        style={styles.input}
      />
      <TouchableOpacity
        style={styles.toggle}
        onPress={() => setVisible(v => !v)}
      >
        <Text style={{ fontSize: 18 }}>{visible ? '🙈' : '👁'}</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: { flexDirection: 'row', alignItems: 'center', borderWidth: 1, borderColor: '#ccc', borderRadius: 10, paddingHorizontal: 14 },
  input: { flex: 1, paddingVertical: 12, fontSize: 16 },
  toggle: { paddingLeft: 8 },
});

autoCapitalize dan autoCorrect

autoCapitalize mengawal masa OS menggunakan huruf besar pada huruf pertama. Nilai: 'none' (tidak pernah menggunakan huruf besar), 'sentences' (huruf pertama setiap ayat, lalai), 'words' (huruf pertama setiap perkataan), 'characters' (setiap aksara). Gunakan 'none' untuk nama pengguna, alamat e-mel dan kata laluan. Gunakan 'words' untuk medan nama. autoCorrect={false} menyahaktifkan pembetulan automatik sepenuhnya, yang penting untuk nama pengguna, istilah teknikal atau sebarang medan yang kandungannya diketahui oleh pengguna.

import { View, TextInput, StyleSheet } from 'react-native';

export default function FormInputs() {
  return (
    <View style={{ padding: 16, gap: 12 }}>
      {/* Name: capitalize each word, allow autocorrect */}
      <TextInput
        style={styles.input}
        placeholder='Full name'
        autoCapitalize='words'
        autoCorrect={true}
      />
      {/* Username: no caps, no autocorrect */}
      <TextInput
        style={styles.input}
        placeholder='@username'
        autoCapitalize='none'
        autoCorrect={false}
      />
      {/* Email: no caps, no autocorrect */}
      <TextInput
        style={styles.input}
        placeholder='Email address'
        keyboardType='email-address'
        autoCapitalize='none'
        autoCorrect={false}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 },
});

returnKeyType dan onSubmitEditing

Prop returnKeyType mengubah label pada kekunci Return papan kekunci: 'done', 'go', 'next', 'search', 'send'. Gunakan 'next' untuk menunjukkan bahawa menekan Return akan beralih ke medan seterusnya. Panggilan balik onSubmitEditing dicetuskan apabila pengguna menekan kekunci Return. Gabungkan returnKeyType='next' dengan onSubmitEditing untuk memfokus TextInput seterusnya secara program menggunakan ref — ini mewujudkan navigasi antara medan borang yang lancar seperti tab, sebagaimana yang dijangka pengguna pada peranti mudah alih.

import { View, TextInput, StyleSheet, useRef } from 'react-native';

export default function MultiFieldForm() {
  const emailRef = useRef(null);
  const passwordRef = useRef(null);

  return (
    <View style={{ padding: 16, gap: 12 }}>
      <TextInput
        ref={emailRef}
        style={styles.input}
        placeholder='Email'
        keyboardType='email-address'
        returnKeyType='next'
        onSubmitEditing={() => passwordRef.current?.focus()}
      />
      <TextInput
        ref={passwordRef}
        style={styles.input}
        placeholder='Password'
        secureTextEntry
        returnKeyType='done'
        onSubmitEditing={() => console.log('Form submitted!')}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 },
});

TextInput Berbilang Baris

Untuk teks berbilang baris seperti bio, mesej atau ulasan, tambahkan prop multiline. TextInput akan berkembang apabila pengguna menaip baris baharu dan menyokong aksara baris baharu. Gunakan numberOfLines pada Android untuk menetapkan ketinggian awal (iOS menetapkan saiz secara automatik). Gaya textAlignVertical: 'top' (Android sahaja) menghalang teks daripada bermula di tengah menegak kotak input. Pada iOS, input berbilang baris berkembang secara automatik mengikut kandungannya apabila tiada ketinggian eksplisit ditetapkan. Gabungkan maxLength dengan paparan kiraan aksara untuk medan penulisan mesej.

import { TextInput, Text, View, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function BioInput() {
  const [bio, setBio] = useState('');
  const MAX_LENGTH = 200;

  return (
    <View style={{ padding: 16 }}>
      <TextInput
        value={bio}
        onChangeText={setBio}
        placeholder='Tell us about yourself...'
        multiline
        numberOfLines={4}     // Android: initial height
        maxLength={MAX_LENGTH}
        style={styles.input}
        textAlignVertical='top' // Android: align text to top
      />
      <Text style={styles.counter}>
        {bio.length}/{MAX_LENGTH}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 10, padding: 12, fontSize: 15, minHeight: 100 },
  counter: { textAlign: 'right', color: '#999', fontSize: 12, marginTop: 4 },
});

Fokus, Kabur serta Peristiwa onFocus / onBlur

TextInput mencetuskan onFocus apabila pengguna mengetiknya (papan kekunci muncul) dan onBlur apabila mereka mengetik di luarnya (papan kekunci disembunyikan). Gunakan peristiwa ini untuk memaparkan atau menyembunyikan teks bantuan, menukar warna sempadan bagi menunjukkan keadaan aktif atau mencetuskan pengesahan pada peringkat medan. Corak yang biasa digunakan ialah mengesahkan medan hanya selepas pengguna meninggalkannya (apabila kabur), bukannya semasa mereka masih menaip — ini mengelakkan mesej ralat dipaparkan sebelum pengguna selesai menaip. Jejaki medan yang sedang difokuskan menggunakan pemboleh ubah keadaan jika anda perlu menggayakan beberapa input secara berbeza berdasarkan fokus.

import { TextInput, View, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function FocusableInput({ placeholder, onBlurValidate }) {
  const [focused, setFocused] = useState(false);
  const [value, setValue] = useState('');
  const [error, setError] = useState('');

  function handleBlur() {
    setFocused(false);
    const err = onBlurValidate ? onBlurValidate(value) : '';
    setError(err);
  }

  return (
    <View>
      <TextInput
        value={value}
        onChangeText={setValue}
        onFocus={() => setFocused(true)}
        onBlur={handleBlur}
        placeholder={placeholder}
        style={[
          styles.input,
          focused && styles.focused,
          error && styles.error,
        ]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1.5, borderColor: '#ddd', borderRadius: 10, padding: 12, fontSize: 16 },
  focused: { borderColor: '#4f86f7', shadowColor: '#4f86f7', shadowOpacity: 0.2, shadowRadius: 4, shadowOffset: { width: 0, height: 2 } },
  error: { borderColor: '#e74c3c' },
});

Menyembunyikan Papan Kekunci

Pada peranti mudah alih, papan kekunci tidak disembunyikan secara automatik apabila pengguna mengetik di luar TextInput. Gunakan Keyboard.dismiss() daripada react-native untuk menyembunyikannya secara programatik. Balut kandungan skrin anda dalam TouchableWithoutFeedback yang memanggil Keyboard.dismiss() apabila ditekan, supaya mengetik di mana-mana di luar papan kekunci akan menyembunyikannya. Sebagai alternatif, gunakan prop keyboardDismissMode pada ScrollView: 'on-drag' menyembunyikan papan kekunci apabila pengguna mula menatal, iaitu corak pengalaman pengguna mudah alih yang selesa.

import { TouchableWithoutFeedback, Keyboard, ScrollView, TextInput, StyleSheet, View } from 'react-native';

export default function DismissibleForm() {
  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <ScrollView
        style={{ flex: 1 }}
        keyboardDismissMode='on-drag'  // dismiss on scroll
        keyboardShouldPersistTaps='handled'
      >
        <View style={{ padding: 16, gap: 12 }}>
          <TextInput style={styles.input} placeholder='Name' />
          <TextInput style={styles.input} placeholder='Email' keyboardType='email-address' />
          <TextInput style={styles.input} placeholder='Message' multiline numberOfLines={4} textAlignVertical='top' />
        </View>
      </ScrollView>
    </TouchableWithoutFeedback>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 },
});

KeyboardAvoidingView

Apabila papan kekunci muncul, ia menutupi bahagian bawah skrin dan boleh menyembunyikan input teks dalam borang. Balut skrin anda dalam KeyboardAvoidingView untuk menolak kandungan ke atas secara automatik apabila papan kekunci dibuka. Tetapkan behavior='padding' pada iOS dan behavior='height' pada Android (gunakan Platform.OS untuk memilih nilai yang betul). Padankannya dengan keyboardVerticalOffset untuk mengambil kira ketinggian pengepala. Untuk skrin yang mempunyai banyak input, gabungan KeyboardAvoidingView dengan ScrollView di dalamnya memberikan pengalaman terbaik.

import { KeyboardAvoidingView, Platform, ScrollView, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native';

export default function LoginScreen() {
  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={60} // adjust for header height
    >
      <ScrollView contentContainerStyle={styles.form}>
        <TextInput style={styles.input} placeholder='Email' keyboardType='email-address' />
        <TextInput style={styles.input} placeholder='Password' secureTextEntry />
        <TouchableOpacity style={styles.btn}>
          <Text style={styles.btnText}>Log In</Text>
        </TouchableOpacity>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  form: { padding: 24, gap: 16, flexGrow: 1, justifyContent: 'center' },
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 10, padding: 14, fontSize: 16 },
  btn: { backgroundColor: '#4f86f7', padding: 16, borderRadius: 10, alignItems: 'center' },
  btnText: { color: '#fff', fontWeight: 'bold', fontSize: 16 },
});

Penyamaran Input untuk Nilai Berformat

Sesetengah input memerlukan paparan berformat semasa pengguna menaip — nombor kad kredit dengan jarak setiap 4 digit, nombor telefon dengan tanda sempang atau tarikh dalam format DD/MM/YYYY. Laksanakan perkara ini dalam pengendali onChangeText: buang aksara pemformatan daripada input mentah, gunakan format tersebut dan tetapkan rentetan berformat sebagai keadaan. TextInput memaparkan nilai berformat (daripada keadaan), tetapi anda menyimpan digit mentah secara berasingan untuk dihantar. Pustaka seperti react-native-mask-input menyediakan TextInput bermask yang boleh terus digunakan dan mengendalikan corak biasa secara automatik.

import { TextInput } from 'react-native';
import { useState } from 'react';

// Manual phone number formatting: (555) 123-4567
export default function PhoneInput({ onPhoneChange }) {
  const [display, setDisplay] = useState('');

  function formatPhone(raw) {
    const digits = raw.replace(/\D/g, '').slice(0, 10); // digits only, max 10
    let formatted = digits;
    if (digits.length > 6) {
      formatted = '(' + digits.slice(0,3) + ') ' + digits.slice(3,6) + '-' + digits.slice(6);
    } else if (digits.length > 3) {
      formatted = '(' + digits.slice(0,3) + ') ' + digits.slice(3);
    } else if (digits.length > 0) {
      formatted = '(' + digits;
    }
    setDisplay(formatted);
    onPhoneChange(digits); // pass raw digits to parent
  }

  return (
    <TextInput
      value={display}
      onChangeText={formatPhone}
      keyboardType='phone-pad'
      placeholder='(555) 123-4567'
      style={{ borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 }}
    />
  );
}

Semakan Pantas

Uji pemahaman anda tentang konsep Pembangunan Mudah Alih React Native daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Ulang Kaji Pelajaran

Dalam pelajaran ini, anda telah mempelajari bahawa: keyboardType memaparkan papan kekunci yang sesuai untuk jenis data, returnKeyType dengan rujukan membolehkan navigasi seperti tab antara medan borang, dan KeyboardAvoidingView menghalang papan kekunci daripada menutupi medan input di bahagian bawah skrin. Seterusnya, kita akan meneroka cara menambahkan maklum balas ketikan dengan TouchableOpacity dan Pressable.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
30
Pelajaran
120
Mula belajar secara percumaLihat kursus penuh

Soalan Lazim

Adakah pelajaran “Asas TextInput dan Jenis Papan Kekunci” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Asas TextInput dan Jenis Papan Kekunci”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Asas TextInput dan Jenis Papan Kekunci”?

Papar TextInput, ikatkannya pada keadaan dengan onChangeText, konfigurasikan jenis papan kekunci untuk input e-mel atau angka dan kendalikan peristiwa kekunci Return. Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Asas TextInput dan Jenis Papan Kekunci” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?

Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Asas TextInput dan Jenis Papan Kekunci
  2. Pengendali Ketikan dengan TouchableOpacity dan Pressable
  3. Togol, Suis dan Kotak Pilihan
  4. Membina Borang Log Masuk Ringkas
← Kembali ke React Native Academy