TextInput — यह क्या है, टेक्स्ट इनपुट और React Native

React Native में TextInput क्या है

TextInput एक React Native कंपोनेंट है जो उपयोगकर्ताओं को डिवाइस कीबोर्ड का उपयोग करके टेक्स्ट दर्ज करने की अनुमति देता है। यह पंजीकरण फ़ॉर्म, खोज बार, संदेश इनपुट फ़ील्ड और उपयोगकर्ता इनपुट की आवश्यकता वाले किसी भी अन्य परिदृश्य के लिए मुख्य निर्माण खंड है। वेब डेवलपमेंट के विपरीत, जहाँ अलग-अलग इनपुट प्रकार (text, email, password, search) मौजूद हैं, React Native में ये सभी वेरिएंट विभिन्न props के साथ एक ही TextInput कंपोनेंट के माध्यम से कार्यान्वित किए जाते हैं।

TextInput संचालन के दो मोड का समर्थन करता है: नियंत्रित (React स्थिति के माध्यम से प्रबंधित) और अनियंत्रित (ref का उपयोग करके)। नियंत्रित मोड में, फ़ील्ड मान कंपोनेंट स्थिति में संग्रहीत होता है और onChangeText कॉलबैक के माध्यम से अपडेट होता है। यह दृष्टिकोण अधिकांश अनुप्रयोगों के लिए अनुशंसित है क्योंकि यह सत्य का एकल स्रोत प्रदान करता है और सत्यापन को सरल बनाता है।

React Native Handling Text Input, 2024 के अनुसार, TextInput स्वचालित रूप से प्लेटफ़ॉर्म के अनुकूल हो जाता है: iOS पर यह मूल UITextField का उपयोग करता है, Android पर — EditText। यह अतिरिक्त कॉन्फ़िगरेशन के बिना ऑटोकंप्लीट, ऑटोकरेक्शन और सिस्टम मेनू (कट/कॉपी/पेस्ट) के उचित संचालन को सुनिश्चित करता है।

TextInput गुण और API

TextInput इनपुट, उपस्थिति और व्यवहार को नियंत्रित करने के लिए props का एक व्यापक सेट प्रदान करता है। सभी props कई श्रेणियों में विभाजित हैं: मान प्रबंधन, कीबोर्ड प्रकार, स्टाइलिंग, इवेंट और प्लेटफ़ॉर्म-विशिष्ट सुविधाएँ।

मान प्रबंधन के गुण

value — फ़ील्ड का वर्तमान मान (नियंत्रित मोड के लिए)। onChangeText — प्रत्येक टेक्स्ट परिवर्तन पर कॉल किया जाने वाला कॉलबैक। placeholder — फ़ील्ड खाली होने पर दिखाया जाने वाला संकेत टेक्स्ट। defaultValue — अनियंत्रित मोड के लिए प्रारंभिक मान। maxLength उपयोगकर्ता द्वारा दर्ज किए जा सकने वाले अक्षरों की अधिकतम संख्या को सीमित करता है।

TextInput इवेंट

कंपोनेंट onFocus (फ़ील्ड को फ़ोकस मिला), onBlur (फ़ील्ड ने फ़ोकस खो दिया), onSubmitEditing (उपयोगकर्ता ने Enter/Return दबाया), onKeyPress (कुंजी दबाव) का समर्थन करता है। onEndEditing इवेंट फ़ोकस खोने पर संपादन समाप्त होने के बाद कॉल किया जाता है। ये कॉलबैक जटिल सत्यापन और फ़ॉर्म सबमिशन लॉजिक को लागू करने की अनुमति देते हैं।

प्लेटफ़ॉर्म-विशिष्ट गुण

iOS पर: clearButtonMode (साफ़ बटन), keyboardAppearance (हल्का/गहरा कीबोर्ड), returnKeyType (Return बटन प्रकार), enablesReturnKeyAutomatically। Android पर: textContentType (ऑटोफ़िल), underlineColorAndroid, inlineImageLeft। secureTextEntry पासवर्ड इनपुट के लिए दोनों प्लेटफ़ॉर्म पर काम करता है।

नियंत्रित और अनियंत्रित इनपुट

React Native में, TextInput दो मोड में काम कर सकता है। नियंत्रित मोड में, React फ़ील्ड मान का प्रबंधन करता है: आप स्थिति से मान पास करते हैं और इसे onChangeText के माध्यम से अपडेट करते हैं। अनियंत्रित मोड में, React केवल फ़ील्ड को आरंभ करता है, और DOM-जैसा मान मूल कंपोनेंट के अंदर संग्रहीत होता है।

नियंत्रित TextInput

नियंत्रित मोड उन सभी फ़ॉर्म के लिए अनुशंसित है जिन्हें इनपुट डेटा के सत्यापन, फ़िल्टरिंग या फ़ॉर्मेटिंग की आवश्यकता है। फ़ील्ड की स्थिति React कंपोनेंट स्थिति के साथ सिंक्रोनाइज़ होती है, जो मान पर पूर्ण नियंत्रण देती है।

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

इस उदाहरण में, दोनों फ़ील्ड नियंत्रित मोड का उपयोग करते हैं। ईमेल फ़ील्ड में email-address कीबोर्ड प्रकार है और ऑटोकैपिटलाइज़ेशन अक्षम है। पासवर्ड फ़ील्ड इनपुट अक्षरों को छिपाने के लिए secureTextEntry का उपयोग करता है और maxLength के माध्यम से 32 अक्षरों तक सीमित है।

अनियंत्रित TextInput

अनियंत्रित मोड सरल फ़ील्ड के लिए उपयुक्त है जिन्हें सत्यापन या इनपुट पर तत्काल प्रतिक्रिया की आवश्यकता नहीं है। फ़ॉर्म सबमिशन के समय फ़ील्ड मान ref के माध्यम से प्राप्त किया जाता है।

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

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

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

अनियंत्रित मोड में, कंपोनेंट तेज़ी से रेंडर होता है क्योंकि इसे प्रत्येक टेक्स्ट परिवर्तन पर स्थिति सिंक्रोनाइज़ेशन की आवश्यकता नहीं होती है। हालाँकि, आप रीयल टाइम में इनपुट को फ़िल्टर, फ़ॉर्मेट या सत्यापित करने की क्षमता खो देते हैं।

कीबोर्ड प्रकार और प्लेटफ़ॉर्म सुविधाएँ

TextInput विभिन्न कीबोर्ड प्रकारों का समर्थन करता है जो अपेक्षित इनपुट प्रारूप के अनुसार लेआउट को अनुकूलित करते हैं। सही कीबोर्ड प्रकार चुनना उपयोगकर्ता अनुभव में सुधार करता है और मोबाइल उपकरणों पर इनपुट त्रुटियों को कम करता है।

iOS पर अतिरिक्त प्रकार उपलब्ध हैं: numbers-and-punctuation, twitter, web-search (वॉइस सर्च के साथ)। Android पर visible-password भी उपलब्ध है (पासवर्ड दिखाता है)। सही keyboardType चुनना मोबाइल एप्लिकेशन UX का एक महत्वपूर्ण पहलू है।

प्लेटफ़ॉर्म सुविधाओं में autoCapitalize (पहले शब्द का स्वचालित कैपिटलाइज़ेशन), autoCorrect (स्वचालित सुधार), spellCheck (वर्तनी जाँच), textContentType (iOS पर ऑटोफ़िल) भी शामिल हैं। ये props प्रत्येक प्लेटफ़ॉर्म पर अलग-अलग काम करते हैं और परीक्षण की आवश्यकता होती है।

TextInput के साथ व्यावहारिक उदाहरण

आइए दो वास्तविक परिदृश्यों पर विचार करें: संदेश इनपुट के लिए मल्टीलाइन फ़ील्ड और मास्क किया हुआ फ़ोन नंबर इनपुट फ़ील्ड। दोनों वांछित व्यवहार प्राप्त करने के लिए विभिन्न props के साथ TextInput का उपयोग करते हैं।

उदाहरण 1: संदेश के लिए मल्टीलाइन फ़ील्ड

लंबा टेक्स्ट (टिप्पणियाँ, विवरण) दर्ज करने के लिए, TextInput multiline prop के माध्यम से मल्टीलाइन मोड में स्विच होता है। इस मोड में, फ़ील्ड लंबवत रूप से बढ़ती है और लाइन ब्रेक का समर्थन करती है।

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 prop मल्टीलाइन मोड को सक्षम करता है, numberOfLines पंक्तियों में प्रारंभिक ऊँचाई निर्धारित करता है। textAlignVertical: 'top' टेक्स्ट को शीर्ष पर संरेखित करता है (डिफ़ॉल्ट रूप से, Android मल्टीलाइन TextInput टेक्स्ट को लंबवत रूप से केंद्रित करता है)।

उदाहरण 2: फ़ोन नंबर फ़ॉर्मेटिंग फ़ील्ड

फ़ोन नंबर दर्ज करने के लिए, अक्सर रीयल-टाइम फ़ॉर्मेटिंग की आवश्यकता होती है। onChangeText को नियमित अभिव्यक्तियों के साथ जोड़कर, आप एक इनपुट मास्क लागू कर सकते हैं।

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 फ़ंक्शन सभी गैर-अंकीय वर्णों को हटाता है और संख्या को मानक अंतर्राष्ट्रीय प्रारूप में फ़ॉर्मेट करता है। keyboardType: 'phone-pad' फ़ोन कीबोर्ड प्रदर्शित करता है। यह दृष्टिकोण फ़ोन नंबर इनपुट के लिए UX में सुधार करता है और फ़ॉर्मेटिंग त्रुटियों को रोकता है।