TextInput — bu nədir, mətn daxil etmə və React Native

React Native-də TextInput nədir

TextInput — istifadəçiyə cihazın klaviaturasından mətn daxil etməyə imkan verən React Native komponentidir. Qeydiyyat formaları, axtarış sətirləri, mesaj daxiletmə sahələri və istifadəçi daxiletməsi tələb olunan digər ssenarilər üçün əsas tikinti blokudur. Veb inkişafdan fərqli olaraq, burada ayrıca input tipləri (text, email, password, search) mövcud deyil — React Native-də bütün bu variantlar müxtəlif xassələrə malik vahid TextInput komponenti vasitəsilə reallaşdırılır.

TextInput iki iş rejimini dəstəkləyir: idarə olunan (React vəziyyəti vasitəsilə idarə olunan) və idarə olunmayan (ref ilə). İdarə olunan rejimdə sahənin dəyəri komponentin vəziyyətində saxlanılır və onChangeText callback-i vasitəsilə yenilənir. Bu yanaşma əksər tətbiqlər üçün tövsiyə olunur, çünki vahid həqiqət mənbəyini təmin edir və validasiyanı sadələşdirir.

React Native Handling Text Input, 2024-ə görə, TextInput avtomatik olaraq platformaya uyğunlaşır: iOS-da yerli UITextField, Android-də isə EditText istifadə olunur. Bu, əlavə konfiqurasiya olmadan avtomatik dəyişdirmə, avtokorreksiya və sistem menyularının (kəs/kopyala/yapışdır) düzgün işləməsini təmin edir.

TextInput komponentinin xassələri və API

TextInput daxiletmə, görünüş və davranışı idarə etmək üçün geniş xassələr dəsti təqdim edir. Bütün xassələr bir neçə kateqoriyaya bölünür: dəyərin idarə edilməsi, klaviatura növü, stilləşdirmə, hadisələr və platforma xüsusiyyətləri.

Dəyərin idarə edilməsi xassələri

value — sahənin cari dəyəri (idarə olunan rejim üçün). onChangeText — mətn hər dəfə dəyişdikdə çağırılan callback. placeholder — sahə boş olduqda göstərilən ipucu mətni. defaultValue — idarə olunmayan rejim üçün ilkin dəyər. maxLength istifadəçinin daxil edə biləcəyi maksimum simvol sayını məhdudlaşdırır.

TextInput hadisələri

Komponent onFocus (sahə fokus aldı), onBlur (sahə fokus itirdi), onSubmitEditing (istifadəçi Enter/Return düyməsini basdı), onKeyPress (düyməyə basma) hadisələrini dəstəkləyir. onEndEditing hadisəsi redaktə başa çatdıqdan sonra fokus itirildikdə çağırılır. Bu callback-lər mürəkkəb validasiya və formaların göndərilməsi məntiqini reallaşdırmağa imkan verir.

Platforma xassələri

iOS-da mövcuddur: clearButtonMode (təmizləmə düyməsi), keyboardAppearance (açıq/tünd klaviatura), returnKeyType (Return düyməsinin növü), enablesReturnKeyAutomatically. Android-də mövcuddur: textContentType (avtomatik doldurma), underlineColorAndroid, inlineImageLeft. secureTextEntry hər iki platformada şifrələrin daxil edilməsi üçün işləyir.

İdarə olunan və idarə olunmayan daxiletmə

React Native-də TextInput iki rejimdə işləyə bilər. İdarə olunan rejimdə React sahənin dəyərini idarə edir: siz vəziyyətdən value ötürür və onChangeText vasitəsilə yeniləyirsiniz. İdarə olunmayan rejimdə React yalnız sahəni işə salır, DOM-a bənzər dəyər isə yerli komponent daxilində saxlanılır.

İdarə olunan TextInput

İdarə olunan rejim validasiya, filtrləmə və ya daxil edilən məlumatların formatlaşdırılması tələb olunan bütün formalar üçün tövsiyə olunur. Sahənin vəziyyəti React komponentinin vəziyyəti ilə sinxronlaşdırılır ki, bu da dəyər üzərində tam nəzarət verir.

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

Bu nümunədə hər iki sahə idarə olunan rejimdən istifadə edir. Email sahəsi email-address klaviatura növünə malikdir və avtomatik böyük hərf söndürülüb. Şifrə secureTextEntry istifadə edərək daxil edilən simvolları gizlədir və maxLength vasitəsilə 32 simvolla məhdudlaşdırılıb.

İdarə olunmayan TextInput

İdarə olunmayan rejim validasiya və ya daxiletməyə ani reaksiya tələb olunmayan sadə sahələr üçün uyğundur. Sahənin dəyəri formanın göndərilməsi zamanı ref vasitəsilə əldə edilir.

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

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

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

İdarə olunmayan rejimdə komponent daha sürətli render olunur, çünki hər mətn dəyişikliyində vəziyyətin sinxronlaşdırılması tələb olunmur. Bununla belə, siz real vaxtda daxiletməni filtrləmək, formatlaşdırmaq və ya validasiya etmək imkanını itirirsiniz.

Klaviatura tipləri və platforma xüsusiyyətləri

TextInput müxtəlif klaviatura tiplərini dəstəkləyir, onlar düzülüşü gözlənilən daxiletmə formatına uyğunlaşdırır. Düzgün klaviatura növünün seçilməsi istifadəçi təcrübəsini yaxşılaşdırır və mobil cihazlarda daxiletmə xətalarının sayını azaldır.

iOS-da əlavə tiplər mövcuddur: numbers-and-punctuation (rəqəmlər və durğu işarələri), twitter, web-search (səsli axtarışla). Android-də visible-password (şifrəni göstərir) da mövcuddur. Düzgün keyboardType seçimi mobil tətbiq UX-nin vacib aspektidir.

Platforma xüsusiyyətlərinə həmçinin autoCapitalize (ilk sözün avtomatik böyük hərfi), autoCorrect (avtokorreksiya), spellCheck (orfoqrafiya yoxlaması), textContentType (iOS-da avtomatik doldurma) daxildir. Bu xassələr hər platformada fərqli işləyir və sınaq tələb edir.

TextInput ilə praktik nümunələr

İki real ssenariyə baxaq: mesaj daxil etmək üçün çoxsətirli sahə və telefon nömrəsinin maskalanmış daxiletməsi olan sahə. Hər ikisi istənilən davranışı əldə etmək üçün müxtəlif xassələrlə TextInput istifadə edir.

Nümunə 1: mesaj üçün çoxsətirli sahə

Uzun mətnin daxil edilməsi üçün (şərhlər, təsvir) TextInput multiline xassəsi vasitəsilə çoxsətirli rejimə keçir. Bu rejimdə sahə şaquli olaraq böyüyür və sətir keçidlərini dəstəkləyir.

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 xassəsi çoxsətirli rejimi aktivləşdirir, numberOfLines sətirlərdə ilkin hündürlüyü təyin edir. textAlignVertical: 'top' mətni yuxarı kənara düzləndirir (Android-də çoxsətirli TextInput standart olaraq mətni şaquli mərkəzləşdirir).

Nümunə 2: telefon nömrəsinin formatlaşdırılması olan sahə

Telefon nömrəsinin daxil edilməsi üçün çox vaxt real vaxtda formatlaşdırma tələb olunur. onChangeText-i müntəzəm ifadələrlə birləşdirərək daxiletmə maskası reallaşdırmaq olar.

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 funksiyası bütün rəqəm olmayan simvolları silir və nömrəni standart beynəlxalq formatda formatlaşdırır. keyboardType: 'phone-pad' telefon klaviaturasını göstərir. Belə yanaşma telefon nömrələrinin daxil edilməsi üçün UX-ni yaxşılaşdırır və formatlaşdırma xətalarının qarşısını alır.