Handling User Input

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

TextInput က text ရိုက်ထည့်ဖို့ component ပါ (HTML ရဲ့ <input> နဲ့ တူ) — value prop နဲ့ onChangeText callback ကို useState နဲ့ ပေါင်းသုံးရင် controlled input ဖြစ်ပါတယ် (user ရိုက်တိုင်း state update)။ Button က basic built-in component ပေမယ့် styling limited ပါတယ် — custom design လိုအပ်ရင် TouchableOpacity/Pressable ကို View+Text နဲ့ ပေါင်းသုံးလေ့ ရှိပါတယ်။

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

Login form တစ်ခု ဆောက်မယ်ဆိုရင် username/password အတွက် TextInput နှစ်ခု, submit button တစ်ခု လိုအပ်ပါတယ် — password field ကို secureTextEntry={true} ထည့်ရင် dot (••••) အဖြစ် ဖျောက်ပြပါတယ်။ TouchableOpacity ကို Button အစား သုံးရင် custom color/border/padding ပေးလို့ရပါတယ် — Button component ကတော့ platform default style ကိုပဲ သုံးရမှာမို့ customize ခက်ပါတယ်။

TextInput + useState = controlled input pattern
secureTextEntry = password field ဖျောက်ပြခြင်း
TouchableOpacity = customizable button (Button ထက် style flexible)

Code နမူနာ

javascript

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

export default function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  return (
    <View style={styles.form}>
      <TextInput
        style={styles.input}
        placeholder="Username"
        value={username}
        onChangeText={setUsername}
      />
      <TextInput
        style={styles.input}
        placeholder="Password"
        secureTextEntry
        value={password}
        onChangeText={setPassword}
      />
      <TouchableOpacity style={styles.button} onPress={() => console.log(username)}>
        <Text style={styles.buttonText}>Login</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  form: { padding: 16 },
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, marginBottom: 12 },
  button: { backgroundColor: '#3b82f6', padding: 14, borderRadius: 8, alignItems: 'center' },
  buttonText: { color: 'white', fontWeight: '600' },
});

You should see

Login form ပေါ်မှာ username/password ရိုက်ထည့်နိုင်ပြီး Login button press လိုက်ရင် username ကို console မှာ print ထုတ်လာမည်။

၅ မိနစ် စမ်းကြည့်

သတိလေးတစ်ချက်

Password TextInput မှာ secureTextEntry ပေးရုံနဲ့ password ကို 'လုံခြုံ' ပြီလို့ မယူဆပါနှင့် — visual masking ပဲ ဖြစ်ပြီး, actual transmission/storage security ကို backend side မှာ သီးခြား handle ရပါမယ်။