TextInput — bu nima, matn kiritish va React Native

React Native-da TextInput nima

TextInput — foydalanuvchiga qurilma klaviaturasidan matn kiritish imkonini beruvchi React Native komponenti. Bu ro'yxatdan o'tish formalari, qidiruv satrlari, xabar kiritish maydonlari va foydalanuvchi kiritishi talab qilinadigan boshqa stsenariylar uchun asosiy qurilish blokidir. Veb-ishlanmadan farqli o'laroq, bu erda alohida input turlari (text, email, password, search) mavjud emas — React Native-da barcha bu variantlar turli xususiyatlarga ega yagona TextInput komponenti orqali amalga oshiriladi.

TextInput ikki ish rejimini qo'llab-quvvatlaydi: boshqariladigan (React holati orqali boshqariladi) va boshqarilmaydigan (ref bilan). Boshqariladigan rejimda maydonning qiymati komponent holatida saqlanadi va onChangeText callback-i orqali yangilanadi. Bu yondashuv ko'pchilik ilovalar uchun tavsiya etiladi, chunki u yagona haqiqat manbasini ta'minlaydi va validatsiyani soddalashtiradi.

React Native Handling Text Input, 2024 ma'lumotlariga ko'ra, TextInput avtomatik ravishda platformaga moslashadi: iOS-da mahalliy UITextField, Android-da esa EditText ishlatiladi. Bu qo'shimcha sozlamalarsiz avtomatik almashtirish, avtokorreksiya va tizim menyularining (kesh/nusxala/yopishtir) to'g'ri ishlashini ta'minlaydi.

TextInput komponentining xususiyatlari va API

TextInput kiritish, tashqi ko'rinish va xatti-harakatni boshqarish uchun keng xususiyatlar to'plamini taqdim etadi. Barcha xususiyatlar bir necha kategoriyaga bo'linadi: qiymatni boshqarish, klaviatura turi, stillashtirish, hodisalar va platforma xususiyatlari.

Qiymatni boshqarish xususiyatlari

value — maydonning joriy qiymati (boshqariladigan rejim uchun). onChangeText — matn har safar o'zgarganda chaqiriladigan callback. placeholder — maydon bo'sh bo'lganda ko'rsatiladigan maslahat matni. defaultValue — boshqarilmaydigan rejim uchun boshlang'ich qiymat. maxLength foydalanuvchi kiritishi mumkin bo'lgan maksimal belgilar sonini cheklaydi.

TextInput hodisalari

Komponent onFocus (maydon fokus oldi), onBlur (maydon fokusni yo'qotdi), onSubmitEditing (foydalanuvchi Enter/Return tugmasini bosdi), onKeyPress (tugma bosish) hodisalarini qo'llab-quvvatlaydi. onEndEditing hodisasi tahrirlash tugagandan so'ng fokus yo'qolganda chaqiriladi. Bu callback-lar murakkab validatsiya va formalarni jo'natish mantiqini amalga oshirishga imkon beradi.

Platforma xususiyatlari

iOS-da mavjud: clearButtonMode (tozalash tugmasi), keyboardAppearance (ochiq/qorong'i klaviatura), returnKeyType (Return tugmasi turi), enablesReturnKeyAutomatically. Android-da mavjud: textContentType (avtomatik to'ldirish), underlineColorAndroid, inlineImageLeft. secureTextEntry ikkala platformada parollarni kiritish uchun ishlaydi.

Boshqariladigan va boshqarilmaydigan kiritish

React Native-da TextInput ikki rejimda ishlashi mumkin. Boshqariladigan rejimda React maydon qiymatini boshqaradi: siz holatdan value uzatasiz va onChangeText orqali yangilaysiz. Boshqarilmaydigan rejimda React faqat maydonni ishga tushiradi, DOM-ga o'xshash qiymat esa mahalliy komponent ichida saqlanadi.

Boshqariladigan TextInput

Boshqariladigan rejim validatsiya, filtrlash yoki kiritilgan ma'lumotlarni formatlash talab qilinadigan barcha formalar uchun tavsiya etiladi. Maydon holati React komponenti holati bilan sinxronlashtiriladi, bu qiymat ustidan to'liq nazorat beradi.

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 misolda ikkala maydon boshqariladigan rejimdan foydalanadi. Email email-address klaviatura turiga ega va avtomatik katta harf o'chirilgan. Parol secureTextEntry dan foydalanib kiritilgan belgilarni yashiradi va maxLength orqali 32 belgi bilan cheklangan.

Boshqarilmaydigan TextInput

Boshqarilmaydigan rejim validatsiya yoki kiritishga darhol reaksiya talab qilinmaydigan oddiy maydonlar uchun mos keladi. Maydon qiymati forma jo'natilayotganda ref orqali olinadi.

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

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

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

Boshqarilmaydigan rejimda komponent tezroq renderlanadi, chunki har bir matn o'zgarishida holatni sinxronlashtirish talab qilinmaydi. Biroq, siz real vaqtda kiritishni filtrlash, formatlash yoki validatsiya qilish imkoniyatini yo'qotasiz.

Klaviatura turlari va platforma xususiyatlari

TextInput turli xil klaviatura turlarini qo'llab-quvvatlaydi, ular tartibni kutilgan kiritish formatiga moslashtiradi. To'g'ri klaviatura turini tanlash foydalanuvchi tajribasini yaxshilaydi va mobil qurilmalarda kiritish xatolari sonini kamaytiradi.

iOS-da qo'shimcha turlar mavjud: numbers-and-punctuation (raqamlar va tinish belgilari), twitter, web-search (ovozli qidiruv bilan). Android-da visible-password (parolni ko'rsatadi) ham mavjud. To'g'ri keyboardType tanlash mobil ilova UX-ning muhim jihatidir.

Platforma xususiyatlari shuningdek autoCapitalize (birinchi so'zni avtomatik katta harf), autoCorrect (avtokorreksiya), spellCheck (imlo tekshiruvi), textContentType (iOS-da avtomatik to'ldirish) ni o'z ichiga oladi. Bu xususiyatlar har bir platformada turlicha ishlaydi va sinov talab qiladi.

TextInput bilan amaliy misollar

Ikkita real stsenariyni ko'rib chiqamiz: xabar kiritish uchun ko'p qatorli maydon va telefon raqamini maskalangan kiritish maydoni. Ikkalasi ham kerakli xatti-harakatga erishish uchun turli xususiyatlar bilan TextInput dan foydalanadi.

Misol 1: xabar uchun ko'p qatorli maydon

Uzoq matn kiritish uchun (sharhlar, tavsif) TextInput multiline xususiyati orqali ko'p qatorli rejimga o'tadi. Bu rejimda maydon vertikal ravishda o'sadi va qator o'tkazishni qo'llab-quvvatlaydi.

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 xususiyati ko'p qatorli rejimni yoqadi, numberOfLines qatorlardagi boshlang'ich balandlikni belgilaydi. textAlignVertical: 'top' matnni yuqori chetiga tekislaydi (Android-da ko'p qatorli TextInput standart ravishda matnni vertikal markazlashtiradi).

Misol 2: telefon raqamini formatlash maydoni

Telefon raqamini kiritish uchun ko'pincha real vaqtda formatlash talab qilinadi. onChangeText ni muntazam ifodalar bilan birlashtirib, kiritish maskasini amalga oshirish mumkin.

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 funksiyasi barcha raqam bo'lmagan belgilarni olib tashlaydi va raqamni standart xalqaro formatda formatlaydi. keyboardType: 'phone-pad' telefon klaviaturasini ko'rsatadi. Bunday yondashuv telefon raqamlarini kiritishda UX-ni yaxshilaydi va formatlash xatolarining oldini oladi.