TextInput — τι είναι, εισαγωγή κειμένου και React Native

Τι είναι το TextInput στο React Native

TextInput είναι ένα στοιχείο React Native που επιτρέπει στον χρήστη να εισάγει κείμενο από το πληκτρολόγιο της συσκευής. Είναι το κύριο δομικό στοιχείο για φόρμες εγγραφής, γραμμές αναζήτησης, πεδία εισαγωγής μηνυμάτων και οποιαδήποτε άλλα σενάρια που απαιτούν είσοδο χρήστη. Σε αντίθεση με την ανάπτυξη ιστού, όπου υπάρχουν ξεχωριστοί τύποι input (text, email, password, search), στο React Native όλες αυτές οι παραλλαγές υλοποιούνται μέσω ενός στοιχείου TextInput με διαφορετικές ιδιότητες.

Το TextInput υποστηρίζει δύο τρόπους λειτουργίας: ελεγχόμενο (διαχειρίζεται μέσω κατάστασης React) και μη ελεγχόμενο (με ref). Στον ελεγχόμενο τρόπο, η τιμή του πεδίου αποθηκεύεται στην κατάσταση του στοιχείου και ενημερώνεται μέσω του callback onChangeText. Αυτή η προσέγγιση συνιστάται για τις περισσότερες εφαρμογές, καθώς παρέχει μία μοναδική πηγή αλήθειας και απλοποιεί την επικύρωση.

Σύμφωνα με το React Native Handling Text Input, 2024, το TextInput προσαρμόζεται αυτόματα στην πλατφόρμα: σε iOS χρησιμοποιείται το εγγενές UITextField, σε Android — το EditText. Αυτό εξασφαλίζει τη σωστή λειτουργία αυτόματης αντικατάστασης, αυτόματης διόρθωσης και μενού συστήματος (αποκοπή/αντιγραφή/επικόλληση) χωρίς πρόσθετη διαμόρφωση.

Ιδιότητες και API του στοιχείου TextInput

TextInput παρέχει ένα εκτεταμένο σύνολο ιδιοτήτων για τη διαχείριση εισαγωγής, εμφάνισης και συμπεριφοράς. Όλες οι ιδιότητες χωρίζονται σε διάφορες κατηγορίες: διαχείριση τιμής, τύπος πληκτρολογίου, στυλ, συμβάντα και χαρακτηριστικά πλατφόρμας.

Ιδιότητες διαχείρισης τιμής

value — η τρέχουσα τιμή του πεδίου (για ελεγχόμενο τρόπο). onChangeText — callback που καλείται σε κάθε αλλαγή κειμένου. placeholder — κείμενο υπόδειξης που εμφανίζεται όταν το πεδίο είναι άδειο. defaultValue — αρχική τιμή για μη ελεγχόμενο τρόπο. maxLength περιορίζει τον μέγιστο αριθμό χαρακτήρων που μπορεί να εισάγει ο χρήστης.

Συμβάντα TextInput

Το στοιχείο υποστηρίζει onFocus (το πεδίο έλαβε εστίαση), onBlur (το πεδίο έχασε την εστίαση), onSubmitEditing (ο χρήστης πάτησε Enter/Return), onKeyPress (πάτημα πλήκτρου). Το συμβάν onEndEditing καλείται μετά την ολοκλήρωση της επεξεργασίας κατά την απώλεια εστίασης. Αυτά τα callback επιτρέπουν την υλοποίηση σύνθετης λογικής επικύρωσης και υποβολής φορμών.

Ιδιότητες πλατφόρμας

Σε iOS είναι διαθέσιμα: clearButtonMode (κουμπί εκκαθάρισης), keyboardAppearance (ανοιχτό/σκοτεινό πληκτρολόγιο), returnKeyType (τύπος κουμπιού Return), enablesReturnKeyAutomatically. Σε Android είναι διαθέσιμα: textContentType (αυτόματη συμπλήρωση), underlineColorAndroid, inlineImageLeft. secureTextEntry λειτουργεί και στις δύο πλατφόρμες για εισαγωγή κωδικών πρόσβασης.

Ελεγχόμενη και μη ελεγχόμενη εισαγωγή

Στο React Native, το TextInput μπορεί να λειτουργεί σε δύο τρόπους. Στον ελεγχόμενο τρόπο, το React διαχειρίζεται την τιμή του πεδίου: στέλνετε το value από την κατάσταση και το ενημερώνετε μέσω 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 έχει τύπο πληκτρολογίου 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). Αυτές οι ιδιότητες λειτουργούν διαφορετικά σε κάθε πλατφόρμα και απαιτούν δοκιμή.

Πρακτικά παραδείγματα με TextInput

Ας εξετάσουμε δύο πραγματικά σενάρια: ένα πολυγραμμικό πεδίο για εισαγωγή μηνύματος και ένα πεδίο με μασκαρισμένη εισαγωγή αριθμού τηλεφώνου. Και τα δύο χρησιμοποιούν TextInput με διαφορετικές ιδιότητες για την επίτευξη της επιθυμητής συμπεριφοράς.

Παράδειγμα 1: πολυγραμμικό πεδίο για μήνυμα

Για εισαγωγή μεγάλου κειμένου (σχόλια, περιγραφή), το TextInput μεταβαίνει σε πολυγραμμική λειτουργία μέσω της ιδιότητας 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"
        />
    );
};

Η ιδιότητα 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 για εισαγωγή αριθμών τηλεφώνου και αποτρέπει σφάλματα μορφοποίησης.