TextInput — was es ist, Texteingabe und React Native

Was ist TextInput in React Native

TextInput ist eine React Native-Komponente, die es Benutzern ermöglicht, Text über die Gerätetastatur einzugeben. Sie ist der grundlegende Baustein für Registrierungsformulare, Suchleisten, Nachrichteneingabefelder und alle anderen Szenarien, die Benutzereingaben erfordern. Im Gegensatz zur Webentwicklung, wo es separate Eingabetypen (text, email, password, search) gibt, werden in React Native all diese Varianten durch eine einzige TextInput-Komponente mit unterschiedlichen Props implementiert.

TextInput unterstützt zwei Betriebsmodi: kontrolliert(über den React-Status verwaltet) und unkontrolliert (mithilfe einer Ref). Im kontrollierten Modus wird der Feldwert im Komponentenstatus gespeichert und über den onChangeText-Callback aktualisiert. Dieser Ansatz wird für die meisten Anwendungen empfohlen, da er eine einzige Quelle der Wahrheit bietet und die Validierung vereinfacht.

Laut React Native Handling Text Input, 2024 passt sich TextInput automatisch an die Plattform an: auf iOS verwendet es natives UITextField, auf Android — EditText. Dies gewährleistet die ordnungsgemäße Funktion von Autovervollständigung, Autokorrektur und Systemmenüs (Ausschneiden/Kopieren/Einfügen) ohne zusätzliche Konfiguration.

TextInput Eigenschaften und API

TextInput bietet eine umfangreiche Reihe von Props zur Steuerung von Eingabe, Erscheinungsbild und Verhalten. Alle Props sind in mehrere Kategorien unterteilt: Wertverwaltung, Tastaturtyp, Styling, Ereignisse und plattformspezifische Funktionen.

Props zur Wertverwaltung

value — der aktuelle Feldwert (für kontrollierten Modus). onChangeText — Callback, der bei jeder Textänderung aufgerufen wird. placeholder — Hinweistext, der angezeigt wird, wenn das Feld leer ist. defaultValue — Anfangswert für den unkontrollierten Modus. maxLength begrenzt die maximale Anzahl von Zeichen, die der Benutzer eingeben kann.

TextInput-Ereignisse

Die Komponente unterstützt onFocus(Feld hat Fokus erhalten), onBlur (Feld hat Fokus verloren), onSubmitEditing (Benutzer hat Enter/Return gedrückt), onKeyPress (Tastendruck). Das onEndEditing-Ereignis wird nach Abschluss der Bearbeitung beim Verlust des Fokus aufgerufen. Diese Callbacks ermöglichen die Implementierung komplexer Validierungs- und Formularübermittlungslogik.

Plattformspezifische Props

Auf iOS: clearButtonMode (Löschtaste), keyboardAppearance (helles/dunkles Tastatur), returnKeyType (Typ der Return-Taste), enablesReturnKeyAutomatically. Auf Android: textContentType (Autofill), underlineColorAndroid, inlineImageLeft. secureTextEntry funktioniert auf beiden Plattformen für die Passworteingabe.

Kontrollierte und unkontrollierte Eingabe

In React Native kann TextInput in zwei Modi arbeiten. Im kontrollierten Modus verwaltet React den Feldwert: Sie übergeben den Wert aus dem Status und aktualisieren ihn über onChangeText. Im unkontrollierten Modus initialisiert React nur das Feld, und der DOM-ähnliche Wert wird innerhalb der nativen Komponente gespeichert.

Kontrollierter TextInput

Der kontrollierte Modus wird für alle Formulare empfohlen, die eine Validierung, Filterung oder Formatierung der Eingabedaten erfordern. Der Feldstatus ist mit dem React-Komponentenstatus synchronisiert, was eine vollständige Kontrolle über den Wert ermöglicht.

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

In diesem Beispiel verwenden beide Felder den kontrollierten Modus. Das E-Mail-Feld hat den Tastaturtyp email-address und die automatische Großschreibung ist deaktiviert. Das Passwortfeld verwendet secureTextEntry zum Ausblenden der Eingabezeichen und ist über maxLength auf 32 Zeichen begrenzt.

Unkontrollierter TextInput

Der unkontrollierte Modus eignet sich für einfache Felder, die keine Validierung oder sofortige Reaktion auf Eingaben erfordern. Der Feldwert wird zum Zeitpunkt der Formularübermittlung über eine Ref abgerufen.

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

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

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

Im unkontrollierten Modus rendert die Komponente schneller, da sie keine Status Synchronisation bei jeder Textänderung erfordert. Allerdings verlieren Sie die Möglichkeit, Eingaben in Echtzeit zu filtern, zu formatieren oder zu validieren.

Tastaturtypen und Plattformfunktionen

TextInput unterstützt verschiedene Tastaturtypen, die das Layout an das erwartete Eingabeformat anpassen. Die Wahl des richtigen Tastaturtyps verbessert die Benutzererfahrung und reduziert Eingabefehler auf mobilen Geräten.

Auf iOS sind zusätzliche Typen verfügbar: numbers-and-punctuation, twitter, web-search (mit Sprachsuche). Auf Android ist auch visible-password verfügbar (zeigt Passwort an). Die Wahl des richtigen keyboardType ist ein wichtiger Aspekt der UX mobiler Anwendungen.

Zu den Plattformfunktionen gehören auch autoCapitalize (automatische Großschreibung des ersten Wortes), autoCorrect (Autokorrektur), spellCheck (Rechtschreibprüfung), textContentType (Autofill auf iOS). Diese Props funktionieren auf jeder Plattform unterschiedlich und erfordern Tests.

Praktische Beispiele mit TextInput

Betrachten wir zwei reale Szenarien: ein mehrzeiliges Feld für die Nachrichteneingabe und ein Feld mit maskierter Telefonnummerneingabe. Beide verwenden TextInput mit verschiedenen Props, um das gewünschte Verhalten zu erreichen.

Beispiel 1: Mehrzeiliges Feld für Nachrichten

Für die Eingabe von langem Text (Kommentare, Beschreibungen) wechselt TextInput über die Prop multiline in den mehrzeiligen Modus. In diesem Modus wächst das Feld vertikal und unterstützt Zeilenumbrüche.

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

Die Prop multiline aktiviert den mehrzeiligen Modus, numberOfLines legt die anfängliche Höhe in Zeilen fest. textAlignVertical: 'top' richtet den Text am oberen Rand aus (standardmäßig zentriert Android mehrzeiligen TextInput vertikal).

Beispiel 2: Feld mit Telefonnummernformatierung

Für die Eingabe einer Telefonnummer ist häufig eine Echtzeitformatierung erforderlich. Durch die Kombination von onChangeText mit regulären Ausdrücken können Sie eine Eingabemaske implementieren.

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

Die Funktion formatPhone entfernt alle nicht numerischen Zeichen und formatiert die Nummer in ein standardmäßiges internationales Format. keyboardType: 'phone-pad' zeigt die Telefontastatur an. Dieser Ansatz verbessert die UX bei der Eingabe von Telefonnummern und verhindert Formatierungsfehler.