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 উন্নত করে এবং ফর্ম্যাটিং ত্রুটি প্রতিরোধ করে।