TextInput — vad är det, textinmatning och React Native

Vad är TextInput i React Native

TextInput är en React Native-komponent som låter användaren mata in text från enhetens tangentbord. Det är den grundläggande byggstenen för registreringsformulär, sökfält, meddelandeinmatningsfält och alla andra scenarier som kräver användarinmatning. Till skillnad från webbutveckling, där det finns separata input-typer (text, email, password, search), implementeras i React Native alla dessa varianter genom en enda TextInput-komponent med olika egenskaper.

TextInput stöder två arbetssätt: kontrollerat (hanterat via React state) och okontrollerat (med ref). I kontrollerat läge lagras fältets värde i komponentens state och uppdateras via onChangeText-återanropet. Detta tillvägagångssätt rekommenderas för de flesta applikationer eftersom det ger en enda källa till sanning och förenklar validering.

Enligt React Native Handling Text Input, 2024 anpassar sig TextInput automatiskt till plattformen: på iOS används inbyggd UITextField, på Android — EditText. Detta säkerställer korrekt funktion av automatisk ersättning, autokorrigering och systemmenyer (klipp ut/kopiera/klistra in) utan ytterligare konfiguration.

Egenskaper och API för TextInput-komponenten

TextInput erbjuder en omfattande uppsättning egenskaper för att hantera inmatning, utseende och beteende. Alla egenskaper är indelade i flera kategorier: värdehantering, tangentbordstyp, styling, händelser och plattformsfunktioner.

Egenskaper för värdehantering

value — fältets aktuella värde (för kontrollerat läge). onChangeText — återanrop som anropas vid varje textändring. placeholder — ledtext som visas när fältet är tomt. defaultValue — startvärde för okontrollerat läge. maxLength begränsar det maximala antalet tecken som användaren kan mata in.

TextInput-händelser

Komponenten stöder onFocus (fältet fick fokus), onBlur (fältet förlorade fokus), onSubmitEditing (användaren tryckte på Enter/Return), onKeyPress (tangenttryckning). Händelsen onEndEditing anropas efter att redigeringen slutförts vid fokusförlust. Dessa återanrop möjliggör implementering av komplex validerings- och formulärskickningslogik.

Plattformsegenskaper

På iOS finns: clearButtonMode (rensningsknapp), keyboardAppearance (ljus/mörk tangentbord), returnKeyType (typ av Return-knapp), enablesReturnKeyAutomatically. På Android finns: textContentType (automatisk ifyllning), underlineColorAndroid, inlineImageLeft. secureTextEntry fungerar på båda plattformarna för lösenordsinmatning.

Kontrollerad och okontrollerad inmatning

I React Native kan TextInput fungera i två lägen. I kontrollerat läge hanterar React fältets värde: du skickar value från state och uppdaterar det via onChangeText. I okontrollerat läge initierar React bara fältet, medan det DOM-liknande värdet lagras i den inbyggda komponenten.

Kontrollerad TextInput

Kontrollerat läge rekommenderas för alla formulär där validering, filtrering eller formatering av inmatade data behövs. Fältets status är synkroniserad med React-komponentens state, vilket ger full kontroll över värdet.

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

I detta exempel använder båda fälten kontrollerat läge. E-post har tangentbordstypen email-address och automatisk versalisering är avstängd. Lösenordet använder secureTextEntry för att dölja inmatade tecken och är begränsat till 32 tecken via maxLength.

Okontrollerad TextInput

Okontrollerat läge passar för enkla fält där ingen validering eller omedelbar reaktion på inmatning behövs. Fältvärdet hämtas via en ref vid formulärskickning.

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

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

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

I okontrollerat läge renderas komponenten snabbare, eftersom den inte kräver statussynkronisering vid varje textändring. Du förlorar dock möjligheten att filtrera, formatera eller validera inmatning i realtid.

Tangentbordstyper och plattformsfunktioner

TextInput stöder olika tangentbordstyper som anpassar layouten till det förväntade inmatningsformatet. Att välja rätt tangentbordstyp förbättrar användarupplevelsen och minskar antalet inmatningsfel på mobila enheter.

På iOS finns ytterligare typer: numbers-and-punctuation (siffror och skiljetecken), twitter, web-search (med röstsökning). På Android finns även visible-password (visar lösenord). Rätt val av keyboardType är en viktig aspekt av UX för mobilapplikationen.

Plattformsfunktioner inkluderar också autoCapitalize (automatisk versalisering av första ordet), autoCorrect (autokorrigering), spellCheck (stavningskontroll), textContentType (automatisk ifyllning på iOS). Dessa egenskaper fungerar olika på varje plattform och kräver testning.

Praktiska exempel med TextInput

Låt oss titta på två verkliga scenarier: ett flerradigt fält för meddelandeinmatning och ett fält med maskerad inmatning av telefonnummer. Båda använder TextInput med olika egenskaper för att uppnå önskat beteende.

Exempel 1: flerradigt fält för meddelande

För inmatning av lång text (kommentarer, beskrivning) växlar TextInput till flerradigt läge via egenskapen multiline. I detta läge växer fältet vertikalt och stöder radbrytningar.

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

Egenskapen multiline aktiverar flerradigt läge, numberOfLines anger den initiala höjden i rader. textAlignVertical: 'top' justerar texten till överkanten (som standard på Android centrerar flerradig TextInput texten vertikalt).

Exempel 2: fält med formatering av telefonnummer

För inmatning av telefonnummer krävs ofta formatering i realtid. Genom att kombinera onChangeText med reguljära uttryck kan en inmatningsmask implementeras.

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

Funktionen formatPhone tar bort alla icke-siffriga tecken och formaterar numret i standard internationellt format. keyboardType: 'phone-pad' visar telefontangentbordet. Detta tillvägagångssätt förbättrar UX för inmatning av telefonnummer och förhindrar formateringsfel.