TextInput — ano ito, pag-input ng teksto at React Native

Ano ang TextInput sa React Native

TextInput ay isang React Native component na nagpapahintulot sa gumagamit na mag-input ng teksto mula sa keyboard ng device. Ito ang pangunahing building block para sa mga registration form, search bar, field ng input ng mensahe, at anumang iba pang senaryo na nangangailangan ng input ng gumagamit. Hindi tulad sa web development, kung saan mayroong hiwalay na uri ng input (text, email, password, search), sa React Native lahat ng variant na ito ay ipinapatupad sa pamamagitan ng isang TextInput component na may iba't ibang property.

Sinusuportahan ng TextInput ang dalawang mode ng trabaho: kontrolado (pinamamahalaan sa pamamagitan ng React state) at hindi kontrolado (na may ref). Sa kontroladong mode, ang halaga ng field ay nakaimbak sa state ng component at ina-update sa pamamagitan ng onChangeText callback. Ang pamamaraang ito ay inirerekomenda para sa karamihan ng mga application, dahil nagbibigay ito ng iisang source of truth at pinapasimple ang validation.

Ayon sa React Native Handling Text Input, 2024, ang TextInput ay awtomatikong umaangkop sa platform: sa iOS ginagamit ang native na UITextField, sa Android — EditText. Tinitiyak nito ang tamang paggana ng awtomatikong pagpapalit, autocorrection, at mga menu ng system (cut/kopya/paste) nang walang karagdagang configuration.

Mga property at API ng TextInput component

TextInput ay nagbibigay ng malawak na hanay ng mga property para sa pamamahala ng input, hitsura, at pag-uugali. Lahat ng property ay nahahati sa ilang kategorya: pamamahala ng halaga, uri ng keyboard, styling, event, at feature ng platform.

Mga property para sa pamamahala ng halaga

value — ang kasalukuyang halaga ng field (para sa kontroladong mode). onChangeText — callback na tinatawag sa bawat pagbabago ng teksto. placeholder — tekstong pahiwatig na ipinapakita kapag walang laman ang field. defaultValue — paunang halaga para sa hindi kontroladong mode. maxLength ay naglilimita sa maximum na bilang ng mga character na maaaring i-input ng gumagamit.

Mga event ng TextInput

Sinusuportahan ng component ang onFocus (nakatanggap ng focus ang field), onBlur (nawala ang focus), onSubmitEditing (pinindot ng gumagamit ang Enter/Return), onKeyPress (pagpindot ng key). Ang event na onEndEditing ay tinatawag pagkatapos ng pag-edit kapag nawala ang focus. Ang mga callback na ito ay nagpapahintulot ng pagpapatupad ng kumplikadong validation at pagpapadala ng form.

Mga property ng platform

Sa iOS available ang: clearButtonMode (button ng pag-clear), keyboardAppearance (maliwanag/dilim na keyboard), returnKeyType (uri ng Return button), enablesReturnKeyAutomatically. Sa Android available ang: textContentType (auto-fill), underlineColorAndroid, inlineImageLeft. secureTextEntry ay gumagana sa parehong platform para sa input ng password.

Kontrolado at hindi kontroladong input

Sa React Native, ang TextInput ay maaaring gumana sa dalawang mode. Sa kontroladong mode, pinamamahalaan ng React ang halaga ng field: ipinapasa mo ang value mula sa state at ina-update ito sa pamamagitan ng onChangeText. Sa hindi kontroladong mode, ang React ay nag-i-initialize lamang ng field, at ang halagang katulad ng DOM ay nakaimbak sa loob ng native component.

Kontroladong TextInput

Ang kontroladong mode ay inirerekomenda para sa lahat ng form kung saan kailangan ang validation, pag-filter, o pag-format ng na-input na data. Ang estado ng field ay naka-sync sa state ng React component, na nagbibigay ng buong kontrol sa halaga.

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

Sa halimbawang ito, parehong field ay gumagamit ng kontroladong mode. Ang Email ay may uri ng keyboard na email-address at naka-off ang awtomatikong capitalization. Ang password ay gumagamit ng secureTextEntry para itago ang mga na-input na character at nililimitahan sa 32 character sa pamamagitan ng maxLength.

Hindi kontroladong TextInput

Ang hindi kontroladong mode ay angkop para sa mga simpleng field kung saan hindi kailangan ang validation o agarang reaksyon sa input. Ang halaga ng field ay kinukuha sa pamamagitan ng ref sa oras ng pagpapadala ng form.

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

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

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

Sa hindi kontroladong mode, ang component ay mas mabilis mag-render, dahil hindi ito nangangailangan ng sync ng state sa bawat pagbabago ng teksto. Gayunpaman, nawawala ang kakayahang mag-filter, mag-format, o mag-validate ng input sa real-time.

Mga uri ng keyboard at feature ng platform

TextInput ay sumusuporta sa iba't ibang uri ng keyboard na nag-aangkop ng layout sa inaasahang format ng input. Ang pagpili ng tamang uri ng keyboard ay nagpapabuti sa karanasan ng gumagamit at nagbabawas ng bilang ng error sa input sa mga mobile device.

Sa iOS available ang mga karagdagang uri: numbers-and-punctuation (mga numero at bantas), twitter, web-search (may voice search). Sa Android available din ang visible-password (nagpapakita ng password). Ang tamang pagpili ng keyboardType ay isang mahalagang aspeto ng UX ng mobile application.

Ang mga feature ng platform ay kasama rin ang autoCapitalize (awtomatikong pag-capitalize ng unang salita), autoCorrect (awtomatikong pagwawasto), spellCheck (pag-check ng spelling), textContentType (auto-fill sa iOS). Ang mga property na ito ay gumagana nang iba sa bawat platform at nangangailangan ng pagsubok.

Mga praktikal na halimbawa gamit ang TextInput

Tingnan natin ang dalawang real na senaryo: isang multi-line field para sa input ng mensahe at isang field na may masked na input ng numero ng telepono. Pareho silang gumagamit ng TextInput na may iba't ibang property para makamit ang nais na pag-uugali.

Halimbawa 1: multi-line field para sa mensahe

Para sa pag-input ng mahabang teksto (mga komento, paglalarawan), ang TextInput ay lumilipat sa multi-line na mode sa pamamagitan ng property na multiline. Sa mode na ito, ang field ay lumalaki nang patayo at sumusuporta sa line breaks.

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

Ang property na multiline ay nag-a-activate ng multi-line mode, ang numberOfLines ay nagtatakda ng paunang taas sa mga linya. Ang textAlignVertical: 'top' ay nag-a-align ng teksto sa itaas na gilid (bilang default sa Android, ang multi-line na TextInput ay nagce-center ng teksto nang patayo).

Halimbawa 2: field na may pag-format ng numero ng telepono

Para sa pag-input ng numero ng telepono madalas kailangan ang real-time na pag-format. Sa pamamagitan ng pagsasama ng onChangeText sa mga regular expression, maaaring ipatupad ang isang input mask.

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

Ang function na formatPhone ay nag-aalis ng lahat ng hindi numerong character at nag-format ng numero sa standard na internasyonal na format. Ang keyboardType: 'phone-pad' ay nagpapakita ng keyboard ng telepono. Ang ganitong pamamaraan ay nagpapabuti sa UX para sa pag-input ng mga numero ng telepono at pumipigil sa mga error sa pag-format.