TextInput — mi ez, szövegbevitel és React Native

Mi az a TextInput a React Native-ben

A TextInput egy React Native komponens, amely lehetővé teszi a felhasználó számára, hogy szöveget vigyen be az eszköz billentyűzetéről. Ez az alapvető építőelem regisztrációs űrlapokhoz, keresősávokhoz, üzenetbeviteli mezőkhöz és minden olyan forgatókönyvhez, ahol felhasználói bevitel szükséges. Ellentétben a webfejlesztéssel, ahol külön input típusok léteznek (text, email, password, search), a React Native-ben mindezek a változatok egyetlen TextInput komponensen keresztül valósulnak meg különböző tulajdonságokkal.

A TextInput két működési módot támogat: vezérelt (React állapoton keresztül irányított) és nem vezérelt (ref-fel). Vezérelt módban a mező értéke a komponens állapotában tárolódik és az onChangeText callback-en keresztül frissül. Ez a megközelítés a legtöbb alkalmazáshoz ajánlott, mivel egyetlen igazságforrást biztosít és egyszerűsíti az érvényesítést.

A React Native Handling Text Input, 2024 szerint a TextInput automatikusan alkalmazkodik a platformhoz: iOS-en natív UITextField, Androidon EditText használatos. Ez biztosítja az automatikus csere, autokorrekció és rendszermenűk (kivágás/másolás/beillesztés) megfelelő működését külön konfiguráció nélkül.

A TextInput komponens tulajdonságai és API-ja

A TextInput széleskörű tulajdonságkészletet kínál a bevitel, megjelenés és viselkedés kezeléséhez. Az összes tulajdonság több kategóriába sorolható: értékkezelés, billentyűzettípus, stílusozás, események és platformjellemzők.

Értékkezelési tulajdonságok

value — a mező aktuális értéke (vezérelt módhoz). onChangeText — callback, amely minden szövegmódosuláskor meghívódik. placeholder — segédszöveg, amely akkor jelenik meg, amikor a mező üres. defaultValue — kezdeti érték a nem vezérelt módhoz. maxLength korlátozza a felhasználó által bevihető karakterek maximális számát.

TextInput események

A komponens támogatja a onFocus (mező fókuszt kapott), onBlur (mező elvesztette a fókuszt), onSubmitEditing (felhasználó megnyomta az Enter/Return billentyűt), onKeyPress (billentyűlenyomás) eseményeket. Az onEndEditing esemény a szerkesztés befejezése után, fókuszvesztéskor hívódik meg. Ezek a callback-ek lehetővé teszik összetett érvényesítési és űrlapküldési logika megvalósítását.

Platform tulajdonságok

iOS-en elérhető: clearButtonMode (törlőgomb), keyboardAppearance (világos/sötét billentyűzet), returnKeyType (Return gomb típusa), enablesReturnKeyAutomatically. Androidon elérhető: textContentType (automatikus kitöltés), underlineColorAndroid, inlineImageLeft. secureTextEntry mindkét platformon működik jelszavak beviteléhez.

Vezérelt és nem vezérelt bevitel

A React Native-ben a TextInput két módban működhet. Vezérelt módban a React kezeli a mező értékét: átadja a value-t az állapotból és frissíti az onChangeText-en keresztül. Nem vezérelt módban a React csak inicializálja a mezőt, és a DOM-szerű érték a natív komponensen belül tárolódik.

Vezérelt TextInput

A vezérelt mód minden olyan űrlaphoz ajánlott, ahol érvényesítés, szűrés vagy a bevitt adatok formázása szükséges. A mező állapota szinkronban van a React komponens állapotával, ami teljes ellenőrzést biztosít az érték felett.

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

Ebben a példában mindkét mező vezérelt módot használ. Az email mező email-address billentyűzettípusú és az automatikus nagybetűsítés ki van kapcsolva. A jelszó a secureTextEntry-t használja a bevitt karakterek elrejtéséhez és 32 karakterre korlátozódik a maxLength segítségével.

Nem vezérelt TextInput

A nem vezérelt mód egyszerű mezőkhöz alkalmas, ahol nincs szükség érvényesítésre vagy azonnali válaszra a bevitelre. A mező értékét a ref-en keresztül lehet lekérni az űrlap beküldésekor.

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

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

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

Nem vezérelt módban a komponens gyorsabban renderelődik, mivel nem igényel állapotszinkronizálást minden szövegmódosításkor. Azonban elveszíti a lehetőséget a bevitel valós idejű szűrésére, formázására és érvényesítésére.

Billentyűzettípusok és platformjellemzők

A TextInput különböző billentyűzettípusokat támogat, amelyek a várt beviteli formátumhoz igazítják az elrendezést. A megfelelő billentyűzettípus kiválasztása javítja a felhasználói élményt és csökkenti a beviteli hibák számát mobileszközökön.

iOS-en további típusok elérhetők: numbers-and-punctuation (számjegyek és írásjelek), twitter, web-search (hangalapú kereséssel). Androidon elérhető a visible-password (jelszó megjelenítése) is. A megfelelő keyboardType kiválasztása a mobilalkalmazás UX-ének fontos aspektusa.

A platformjellemzők közé tartozik még autoCapitalize (az első szó automatikus nagybetűsítése), autoCorrect (autokorrekció), spellCheck (helyesírás-ellenőrzés), textContentType (automatikus kitöltés iOS-en). Ezek a tulajdonságok platformonként eltérően működnek és tesztelést igényelnek.

Gyakorlati példák a TextInput-tal

Nézzünk meg két valós forgatókönyvet: egy többsoros mezőt üzenet beviteléhez és egy mezőt telefonszám maszkolt bevitelével. Mindkettő TextInput-ot használ különböző tulajdonságokkal a kívánt viselkedés eléréséhez.

1. példa: többsoros mező üzenethez

Hosszú szöveg beviteléhez (megjegyzések, leírás) a TextInput a multiline tulajdonságon keresztül többsoros módba kapcsol. Ebben a módban a mező függőlegesen nő és támogatja a soremeléseket.

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

A multiline tulajdonság bekapcsolja a többsoros módot, a numberOfLines megadja a kezdeti magasságot sorokban. A textAlignVertical: 'top' a szöveget a felső szélhez igazítja (alapértelmezetten Androidon a többsoros TextInput függőlegesen középre igazítja a szöveget).

2. példa: mező telefonszám formázással

Telefonszám beviteléhez gyakran valós idejű formázás szükséges. Az onChangeText és a reguláris kifejezések kombinálásával beviteli maszk valósítható meg.

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

A formatPhone függvény eltávolítja az összes nem számjegy karaktert és formázza a számot szabványos nemzetközi formátumba. A keyboardType: 'phone-pad' megjeleníti a telefon billentyűzetet. Ez a megközelítés javítja a UX-et telefonszámok bevitelénél és megelőzi a formázási hibákat.