TextInput — คืออะไร การป้อนข้อความ และ React Native

TextInput ใน React Native คืออะไร

TextInput เป็นคอมโพเนนต์ React Native ที่อนุญาตให้ผู้ใช้ป้อนข้อความโดยใช้คีย์บอร์ดของอุปกรณ์ เป็นส่วนประกอบหลักสำหรับฟอร์มลงทะเบียน แถบค้นหา ฟิลด์ป้อนข้อความ และสถานการณ์อื่นๆ ที่ต้องการการป้อนข้อมูลจากผู้ใช้ ต่างจากการพัฒนาเว็บที่มีประเภท input แยกต่างหาก (text, email, password, search) ใน React Native รูปแบบทั้งหมดนี้ถูกนำมาใช้ผ่านคอมโพเนนต์ TextInput เดียวกับ props ที่แตกต่างกัน

TextInput รองรับสองโหมดการทำงาน: แบบควบคุม(จัดการผ่านสถานะ React) และไม่ควบคุม (ใช้ ref) ในโหมดควบคุม ค่าของฟิลด์จะถูกเก็บในสถานะของคอมโพเนนต์และอัปเดตผ่าน callback onChangeText วิธีการนี้แนะนำสำหรับแอปพลิเคชันส่วนใหญ่เนื่องจากเป็นแหล่งความจริงเดียวและช่วยให้การตรวจสอบความถูกต้องง่ายขึ้น

ตาม React Native Handling Text Input, 2024 TextInput จะ ปรับ ให้เข้ากับแพลตฟอร์มโดยอัตโนมัติ: บน iOS ใช้ UITextField ดั้งเดิม บน Android — EditText ซึ่งรับประกันการทำงานที่ถูกต้องของการเติมข้อความอัตโนมัติ การแก้ไขอัตโนมัติ และเมนูระบบ (ตัด/คัดลอก/วาง) โดยไม่ต้องกำหนดค่าเพิ่มเติม

คุณสมบัติและ API ของ TextInput

TextInput มีชุด props มากมายสำหรับควบคุมการป้อนข้อมูล ลักษณะที่ปรากฏ และพฤติกรรม props ทั้งหมดแบ่งออกเป็นหลายหมวดหมู่: การจัดการค่า ประเภทคีย์บอร์ด การจัดรูปแบบ เหตุการณ์ และคุณสมบัติเฉพาะแพลตฟอร์ม

props การจัดการค่า

value — ค่าปัจจุบันของฟิลด์ (สำหรับโหมดควบคุม) onChangeText — callback ที่เรียกทุกครั้งที่มีการเปลี่ยนแปลงข้อความ placeholder — ข้อความแนะนำที่แสดงเมื่อฟิลด์ว่าง defaultValue — ค่าเริ่มต้นสำหรับโหมดไม่ควบคุม maxLength จำกัดจำนวนอักขระสูงสุดที่ผู้ใช้สามารถป้อนได้

เหตุการณ์ TextInput

คอมโพเนนต์รองรับ onFocus (ฟิลด์ได้รับโฟกัส), onBlur (ฟิลด์เสียโฟกัส), onSubmitEditing (ผู้ใช้กด Enter/Return), onKeyPress (การกดแป้น) เหตุการณ์ onEndEditing จะถูกเรียกหลังจากเสร็จสิ้นการแก้ไขเมื่อเสียโฟกัส callbacks เหล่านี้ช่วยให้สามารถใช้ตรรกะการตรวจสอบความถูกต้องและการส่งฟอร์มที่ซับซ้อนได้

props เฉพาะแพลตฟอร์ม

บน iOS: clearButtonMode (ปุ่มล้าง), keyboardAppearance (คีย์บอร์ดสว่าง/มืด), returnKeyType (ประเภทปุ่ม Return), enablesReturnKeyAutomatically บน Android: textContentType (การเติมอัตโนมัติ), underlineColorAndroid, inlineImageLeft secureTextEntry ทำงานบนทั้งสองแพลตฟอร์มสำหรับการป้อนรหัสผ่าน

การป้อนแบบควบคุมและไม่ควบคุม

ใน React Native TextInput สามารถทำงานได้สองโหมด ในโหมด ควบคุม React จะจัดการค่าของฟิลด์: คุณส่งค่าจากสถานะและอัปเดตผ่าน onChangeText ในโหมด ไม่ควบคุม React จะเริ่มต้นฟิลด์เท่านั้น และค่าแบบ DOM จะถูกเก็บไว้ภายในคอมโพเนนต์ดั้งเดิม

TextInput แบบควบคุม

โหมดควบคุมแนะนำสำหรับฟอร์มทั้งหมดที่ต้องการ การตรวจสอบ การกรอง หรือการจัดรูปแบบข้อมูลที่ป้อน สถานะของฟิลด์จะซิงค์กับสถานะของคอมโพเนนต์ React ซึ่งให้การควบคุมค่าอย่างสมบูรณ์

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>
    );
};

ในตัวอย่างนี้ ทั้งสองฟิลด์ใช้โหมด ควบคุม ฟิลด์อีเมลมีประเภทคีย์บอร์ด email-address และปิดการใช้งานการใช้อักษรตัวพิมพ์ใหญ่โดยอัตโนมัติ ฟิลด์รหัสผ่านใช้ secureTextEntry เพื่อซ่อนอักขระที่ป้อนและจำกัดที่ 32 อักขระผ่าน maxLength

TextInput แบบไม่ควบคุม

โหมดไม่ควบคุมเหมาะสำหรับฟิลด์ง่ายๆ ที่ไม่ต้องการ การตรวจสอบ หรือการตอบสนองทันทีต่อการป้อนข้อมูล ค่าของฟิลด์จะถูกเรียกผ่าน ref ในเวลาที่ส่งฟอร์ม

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

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

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

ในโหมดไม่ควบคุม คอมโพเนนต์จะ เรนเดอร์ ได้เร็วกว่าเนื่องจากไม่ต้องการการซิงค์สถานะทุกครั้งที่มีการเปลี่ยนแปลงข้อความ อย่างไรก็ตาม คุณสูญเสียความสามารถในการกรอง จัดรูปแบบ หรือตรวจสอบการป้อนข้อมูลแบบเรียลไทม์

ประเภทคีย์บอร์ดและคุณสมบัติของแพลตฟอร์ม

TextInput รองรับประเภทคีย์บอร์ดต่างๆ ที่ปรับเค้าโครงตามรูปแบบการป้อนข้อมูลที่คาดหวัง การเลือกประเภทคีย์บอร์ดที่ถูกต้องช่วยปรับปรุงประสบการณ์ผู้ใช้และลดข้อผิดพลาดในการป้อนข้อมูลบนอุปกรณ์มือถือ

บน iOS มีประเภทเพิ่มเติม: numbers-and-punctuation, twitter, web-search (พร้อมค้นหาด้วยเสียง) บน Android ยังมี visible-password (แสดงรหัสผ่าน) การเลือก keyboardType ที่ถูกต้องเป็นสิ่งสำคัญของ UX ของแอปพลิเคชันมือถือ

คุณสมบัติของแพลตฟอร์มยังรวมถึง autoCapitalize (การใช้อักษรตัวพิมพ์ใหญ่โดยอัตโนมัติสำหรับคำแรก), autoCorrect (การแก้ไขอัตโนมัติ), spellCheck (การตรวจสอบการสะกด), textContentType (การเติมอัตโนมัติบน iOS) props เหล่านี้ทำงานแตกต่างกันบนแต่ละแพลตฟอร์มและต้องการการทดสอบ

ตัวอย่างการใช้งานจริงกับ TextInput

ลองพิจารณาสองสถานการณ์จริง: ฟิลด์หลายบรรทัดสำหรับป้อนข้อความและฟิลด์ป้อนหมายเลขโทรศัพท์แบบมีมาสก์ ทั้งสองใช้ TextInput กับ props ที่แตกต่างกันเพื่อให้ได้พฤติกรรมที่ต้องการ

ตัวอย่างที่ 1: ฟิลด์หลายบรรทัดสำหรับข้อความ

สำหรับการป้อนข้อความยาว (ความคิดเห็น คำอธิบาย) TextInput จะเปลี่ยนเป็นโหมด หลายบรรทัด ผ่าน prop multiline ในโหมดนี้ ฟิลด์จะขยายในแนวตั้งและรองรับการขึ้นบรรทัดใหม่

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"
        />
    );
};

prop multiline เปิดใช้งานโหมดหลายบรรทัด numberOfLines กำหนดความสูงเริ่มต้นเป็นบรรทัด textAlignVertical: 'top' จัดแนวข้อความไปที่ด้านบน (โดยค่าเริ่มต้น Android TextInput แบบหลายบรรทัดจะจัดกึ่งกลางข้อความในแนวตั้ง)

ตัวอย่างที่ 2: ฟิลด์จัดรูปแบบหมายเลขโทรศัพท์

สำหรับการป้อน หมายเลขโทรศัพท์ มักต้องการการจัดรูปแบบแบบเรียลไทม์ โดยการรวม onChangeText เข้ากับนิพจน์ปกติ คุณสามารถใช้มาสก์การป้อนข้อมูลได้

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}
        />
    );
};

ฟังก์ชัน formatPhone จะลบอักขระที่ไม่ใช่ตัวเลขทั้งหมดและจัดรูปแบบหมายเลขเป็นรูปแบบมาตรฐานสากล keyboardType: 'phone-pad' แสดงคีย์บอร์ดโทรศัพท์ วิธีการนี้ช่วยปรับปรุง UX สำหรับการป้อนหมายเลขโทรศัพท์และป้องกันข้อผิดพลาดในการจัดรูปแบบ