การใช้งาน TextInput: รับข้อมูลจากผู้ใช้

การใช้งาน TextInput: รับข้อมูลจากผู้ใช้

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับการใช้ StyleSheet เพื่อตกแต่ง Component ต่างๆ ให้สวยงามและเป็นระเบียบเรียบร้อย ในบทนี้ เราจะมาเรียนรู้วิธีการรับข้อมูลจากผู้ใช้ผ่าน TextInput Component ซึ่งเป็นหัวใจสำคัญของการสร้างแอปพลิเคชันที่มีการโต้ตอบกับผู้ใช้งาน

TextInput Component คืออะไร?

TextInput เป็น Component พื้นฐานของ React Native ที่ใช้สำหรับรับข้อมูลจากผู้ใช้ผ่านการพิมพ์ข้อความลงในช่อง Input คล้ายกับ <input> ใน HTML แต่มีความสามารถที่ปรับแต่งได้มากกว่า

เริ่มต้นใช้งาน TextInput

เริ่มต้นด้วยการ import TextInput จาก react-native:

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

const App = () => {
  return (
    <View style={styles.container}>
      <TextInput style={styles.input} placeholder="พิมพ์ข้อความที่นี่..." />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  input: {
    height: 40,
    width: '100%',
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 5,
    paddingHorizontal: 10,
  },
});

export default App;

จากโค้ดด้านบน เราได้สร้าง Component TextInput ที่มี placeholder เป็น "พิมพ์ข้อความที่นี่..." และกำหนด Style ให้กับ TextInput ผ่าน StyleSheet เพื่อให้มีขอบ, ความสูง, และระยะห่างที่เหมาะสม

การจัดการ State ของ TextInput

การรับข้อมูลจาก TextInput เพียงอย่างเดียวไม่เพียงพอ เราต้องจัดการข้อมูลที่ผู้ใช้พิมพ์เข้ามาด้วย โดยใช้ useState Hook เพื่อเก็บค่าของข้อความที่ผู้ใช้พิมพ์

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

const App = () => {
  const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="พิมพ์ข้อความที่นี่..."
        onChangeText={newText => setText(newText)}
        defaultValue={text}
      />
      <Text>ข้อความที่คุณพิมพ์: {text}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  input: {
    height: 40,
    width: '100%',
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 5,
    paddingHorizontal: 10,
    marginBottom: 10,
  },
});

export default App;

ในโค้ดนี้ เราได้เพิ่ม useState Hook เพื่อสร้าง State ที่ชื่อ text และฟังก์ชัน setText สำหรับอัพเดท State เราได้กำหนด onChangeText prop ให้กับ TextInput เพื่อให้ทุกครั้งที่ผู้ใช้พิมพ์ข้อความ ฟังก์ชัน setText จะถูกเรียกใช้เพื่ออัพเดทค่าของ text และเรายังใช้ defaultValue={text} เพื่อให้ค่าเริ่มต้นของ TextInput ตรงกับค่าใน State (แม้ว่า prop นี้จะถูกแทนที่ด้วย `value` ใน React Native รุ่นใหม่ๆ แต่การใช้ `defaultValue` ในบทช่วยสอนเริ่มต้นจะช่วยให้เข้าใจหลักการทำงานได้ง่ายขึ้น) สุดท้าย เราแสดงค่าของ text ใน Text Component เพื่อให้ผู้ใช้เห็นข้อความที่ตัวเองพิมพ์

ข้อผิดพลาดที่พบบ่อย: การไม่กำหนด onChangeText หรือกำหนดผิดวิธี จะทำให้ TextInput ไม่สามารถรับข้อมูลจากผู้ใช้ได้

การตรวจสอบความถูกต้องของ Input

การรับข้อมูลจากผู้ใช้จำเป็นต้องมีการตรวจสอบความถูกต้องของข้อมูล เพื่อป้องกันข้อผิดพลาดและรักษาความปลอดภัยของแอปพลิเคชัน React Native มี Props ที่ช่วยในการตรวจสอบ Input เบื้องต้นได้

keyboardType

กำหนดชนิดของคีย์บอร์ดที่แสดงผล เช่น numeric สำหรับตัวเลข, email-address สำหรับอีเมล, phone-pad สำหรับเบอร์โทรศัพท์

<TextInput
  style={styles.input}
  placeholder="เบอร์โทรศัพท์"
  keyboardType="phone-pad"
  onChangeText={newText => setText(newText)}
  defaultValue={text}
/>

secureTextEntry

ใช้สำหรับ Input ที่ต้องการความปลอดภัย เช่น รหัสผ่าน จะซ่อนข้อความที่พิมพ์ด้วยเครื่องหมายดอกจัน (*)

<TextInput
  style={styles.input}
  placeholder="รหัสผ่าน"
  secureTextEntry={true}
  onChangeText={newText => setText(newText)}
  defaultValue={text}
/>

maxLength

กำหนดจำนวนตัวอักษรสูงสุดที่ผู้ใช้สามารถพิมพ์ได้

<TextInput
  style={styles.input}
  placeholder="ชื่อผู้ใช้ (สูงสุด 20 ตัวอักษร)"
  maxLength={20}
  onChangeText={newText => setText(newText)}
  defaultValue={text}
/>

นอกจาก Props เหล่านี้ เรายังสามารถใช้ Regular Expression หรือ Libraries อื่นๆ เช่น Yup หรือ Formik เพื่อตรวจสอบความถูกต้องของ Input ที่ซับซ้อนมากขึ้นได้ (ซึ่งเราจะกล่าวถึงในบทที่ 16)

กรณีใช้งานจริง: สร้าง Form Login อย่างง่าย

ลองนำความรู้ที่ได้เรียนรู้มาสร้าง Form Login อย่างง่าย โดยมีช่องสำหรับ Username และ Password

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

const App = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    if (username === 'admin' && password === 'password') {
      Alert.alert('Login สำเร็จ!', 'ยินดีต้อนรับ!');
    } else {
      Alert.alert('Login ล้มเหลว!', 'Username หรือ Password ไม่ถูกต้อง');
    }
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Username"
        onChangeText={newUsername => setUsername(newUsername)}
        defaultValue={username}
      />
      <TextInput
        style={styles.input}
        placeholder="Password"
        secureTextEntry={true}
        onChangeText={newPassword => setPassword(newPassword)}
        defaultValue={password}
      />
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  input: {
    height: 40,
    width: '100%',
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 5,
    paddingHorizontal: 10,
    marginBottom: 10,
  },
});

export default App;

ในโค้ดนี้ เราได้สร้าง State สองตัวสำหรับเก็บ Username และ Password เมื่อผู้ใช้กดปุ่ม Login ฟังก์ชัน handleLogin จะถูกเรียกใช้เพื่อตรวจสอบ Username และ Password หากถูกต้อง จะแสดง Alert ว่า Login สำเร็จ หากไม่ถูกต้อง จะแสดง Alert ว่า Login ล้มเหลว

ข้อควรระวัง: โค้ดนี้เป็นเพียงตัวอย่างสำหรับการเรียนรู้ ไม่ควรใช้ในการ Login จริง เพราะมีการ Hardcode Username และ Password ไว้ในโค้ด

Performance Considerations

การอัพเดท State ของ TextInput ทุกครั้งที่ผู้ใช้พิมพ์ อาจส่งผลกระทบต่อ Performance ของแอปพลิเคชัน โดยเฉพาะอย่างยิ่งถ้า Component มีความซับซ้อน หรือมีการอัพเดท State จำนวนมาก

Debouncing: เทคนิคที่ช่วยลดจำนวนครั้งในการอัพเดท State โดยรอให้ผู้ใช้หยุดพิมพ์สักพักก่อนที่จะอัพเดท State สามารถใช้ Libraries เช่น lodash.debounce เพื่อช่วยในการ Debounce ได้

useCallback: Hook ที่ช่วย Memoize ฟังก์ชัน Callback เพื่อป้องกันการสร้างฟังก์ชันใหม่ทุกครั้งที่ Component Render ซึ่งจะช่วยลดภาระของ Garbage Collector

Security Considerations

TextInput อาจเป็นช่องทางให้ผู้ไม่ประสงค์ดีโจมตีแอปพลิเคชันได้ หากไม่มีการป้องกันที่เหมาะสม

Sanitization: การทำความสะอาดข้อมูลที่ผู้ใช้ป้อนเข้ามา เพื่อป้องกันการ Inject Code ที่เป็นอันตราย เช่น SQL Injection หรือ Cross-Site Scripting (XSS)

Validation: การตรวจสอบความถูกต้องของข้อมูลที่ผู้ใช้ป้อนเข้ามา เพื่อป้องกันการป้อนข้อมูลที่ไม่ถูกต้อง หรือข้อมูลที่เป็นอันตราย

สรุป

ในบทนี้ เราได้เรียนรู้วิธีการใช้ TextInput Component เพื่อรับข้อมูลจากผู้ใช้, การจัดการ State ของ TextInput, และการตรวจสอบความถูกต้องของ Input รวมถึงข้อควรพิจารณาด้าน Performance และ Security ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับการสร้างปุ่มกดด้วย Button และ TouchableOpacity Component