TextInput — nó là gì, nhập văn bản và React Native

TextInput trong React Native là gì

TextInput là thành phần React Native cho phép người dùng nhập văn bản bằng bàn phím thiết bị. Nó là khối xây dựng chính cho biểu mẫu đăng ký, thanh tìm kiếm, trường nhập tin nhắn và mọi tình huống khác cần nhập liệu từ người dùng. Không giống như phát triển web, nơi có các loại input riêng biệt (text, email, password, search), trong React Native tất cả các biến thể này được triển khai thông qua một thành phần TextInput duy nhất với các props khác nhau.

TextInput hỗ trợ hai chế độ hoạt động: có điều khiển (được quản lý qua trạng thái React) và không điều khiển (sử dụng ref). Ở chế độ có điều khiển, giá trị trường được lưu trong trạng thái thành phần và được cập nhật qua callback onChangeText. Phương pháp này được khuyến nghị cho hầu hết các ứng dụng vì nó cung cấp một nguồn dữ liệu duy nhất và đơn giản hóa việc xác thực.

Theo React Native Handling Text Input, 2024, TextInput tự động thích ứng với nền tảng: trên iOS nó sử dụng UITextField gốc, trên Android — EditText. Điều này đảm bảo hoạt động chính xác của tính năng tự động hoàn thành, tự động sửa lỗi và menu hệ thống (cắt/sao chép/dán) mà không cần cấu hình thêm.

Thuộc tính và API của TextInput

TextInput cung cấp một bộ props phong phú để kiểm soát nhập liệu, giao diện và hành vi. Tất cả props được chia thành nhiều danh mục: quản lý giá trị, loại bàn phím, kiểu dáng, sự kiện và tính năng dành riêng cho nền tảng.

Props quản lý giá trị

value — giá trị hiện tại của trường (cho chế độ có điều khiển). onChangeText — callback được gọi mỗi khi văn bản thay đổi. placeholder — văn bản gợi ý hiển thị khi trường trống. defaultValue — giá trị ban đầu cho chế độ không điều khiển. maxLength giới hạn số ký tự tối đa người dùng có thể nhập.

Sự kiện TextInput

Thành phần hỗ trợ onFocus (trường nhận được tiêu điểm), onBlur (trường mất tiêu điểm), onSubmitEditing (người dùng nhấn Enter/Return), onKeyPress (nhấn phím). Sự kiện onEndEditing được gọi sau khi kết thúc chỉnh sửa khi mất tiêu điểm. Các callback này cho phép triển khai logic xác thực và gửi biểu mẫu phức tạp.

Props dành riêng cho nền tảng

Trên iOS: clearButtonMode (nút xóa), keyboardAppearance (bàn phím sáng/tối), returnKeyType (loại nút Return), enablesReturnKeyAutomatically. Trên Android: textContentType (tự động điền), underlineColorAndroid, inlineImageLeft. secureTextEntry hoạt động trên cả hai nền tảng cho việc nhập mật khẩu.

Nhập liệu có điều khiển và không điều khiển

Trong React Native, TextInput có thể hoạt động ở hai chế độ. Ở chế độ có điều khiển, React quản lý giá trị của trường: bạn truyền giá trị từ trạng thái và cập nhật nó qua onChangeText. Ở chế độ không điều khiển, React chỉ khởi tạo trường và giá trị giống DOM được lưu trữ bên trong thành phần gốc.

TextInput có điều khiển

Chế độ có điều khiển được khuyến nghị cho tất cả các biểu mẫu yêu cầu xác thực, lọc hoặc định dạng dữ liệu nhập. Trạng thái trường được đồng bộ với trạng thái thành phần React, cho phép kiểm soát hoàn toàn giá trị.

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

Trong ví dụ này, cả hai trường đều sử dụng chế độ có điều khiển. Trường email có loại bàn phím email-address và tắt tính năng tự động viết hoa. Trường mật khẩu sử dụng secureTextEntry để ẩn ký tự nhập và bị giới hạn 32 ký tự qua maxLength.

TextInput không điều khiển

Chế độ không điều khiển phù hợp cho các trường đơn giản không yêu cầu xác thực hoặc phản ứng tức thời với nhập liệu. Giá trị trường được lấy qua ref tại thời điểm gửi biểu mẫu.

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

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

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

Ở chế độ không điều khiển, thành phần hiển thị nhanh hơn vì không cần đồng bộ trạng thái sau mỗi lần thay đổi văn bản. Tuy nhiên, bạn mất khả năng lọc, định dạng hoặc xác thực đầu vào theo thời gian thực.

Loại bàn phím và tính năng nền tảng

TextInput hỗ trợ nhiều loại bàn phím khác nhau giúp điều chỉnh bố cục theo định dạng nhập liệu mong đợi. Chọn đúng loại bàn phím cải thiện trải nghiệm người dùng và giảm lỗi nhập liệu trên thiết bị di động.

Trên iOS, có sẵn các loại bổ sung: numbers-and-punctuation, twitter, web-search (có tìm kiếm bằng giọng nói). Trên Android, cũng có sẵn visible-password (hiển thị mật khẩu). Chọn đúng keyboardType là một khía cạnh quan trọng của UX ứng dụng di động.

Các tính năng nền tảng cũng bao gồm autoCapitalize (tự động viết hoa chữ cái đầu), autoCorrect (tự động sửa lỗi), spellCheck (kiểm tra chính tả), textContentType (tự động điền trên iOS). Các props này hoạt động khác nhau trên mỗi nền tảng và cần được kiểm tra.

Ví dụ thực tế với TextInput

Hãy xem xét hai tình huống thực tế: trường nhiều dòng để nhập tin nhắn và trường nhập số điện thoại có mặt nạ. Cả hai đều sử dụng TextInput với các props khác nhau để đạt được hành vi mong muốn.

Ví dụ 1: Trường nhiều dòng cho tin nhắn

Để nhập văn bản dài (bình luận, mô tả), TextInput chuyển sang chế độ nhiều dòng qua prop multiline. Ở chế độ này, trường mở rộng theo chiều dọc và hỗ trợ xuống dòng.

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

Prop multiline kích hoạt chế độ nhiều dòng, numberOfLines đặt chiều cao ban đầu theo số dòng. textAlignVertical: 'top' căn chỉnh văn bản lên trên cùng (mặc định, trên Android TextInput nhiều dòng căn giữa văn bản theo chiều dọc).

Ví dụ 2: Trường định dạng số điện thoại

Để nhập số điện thoại, thường cần định dạng theo thời gian thực. Bằng cách kết hợp onChangeText với biểu thức chính quy, bạn có thể triển khai mặt nạ nhập liệu.

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

Hàm formatPhone loại bỏ tất cả ký tự không phải số và định dạng số theo định dạng quốc tế chuẩn. keyboardType: 'phone-pad' hiển thị bàn phím điện thoại. Phương pháp này cải thiện UX cho việc nhập số điện thoại và ngăn ngừa lỗi định dạng.