Form cơ bản với TextInput trong React Native

Form là phần gần như app nào cũng có: đăng nhập, đăng ký, tìm kiếm, cập nhật profile, gửi phản hồi. Trong React Native, component quan trọng nhất khi làm form là TextInput.

Người mới nên bắt đầu bằng controlled input: giá trị của input nằm trong state, và mỗi lần người dùng nhập, state được cập nhật. Cách này giúp bạn dễ validation, submit và reset form.

TextInput cơ bản

import { useState } from 'react';
import { Button, TextInput, View } from 'react-native';

function LoginForm() {
  const [email, setEmail] = useState('');

  return (
    <View style={{ padding: 16 }}>
      <TextInput
        value={email}
        onChangeText={setEmail}
        placeholder="Email"
        keyboardType="email-address"
        autoCapitalize="none"
        style={{ borderWidth: 1, padding: 12, borderRadius: 8 }}
      />
      <Button title="Đăng nhập" onPress={() => console.log(email)} />
    </View>
  );
}

value lấy dữ liệu từ state. onChangeText cập nhật state khi người dùng nhập. Đây là mẫu bạn sẽ dùng rất nhiều.

Form đăng nhập nhỏ

function LoginScreen() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  function handleSubmit() {
    if (!email.includes('@')) {
      setError('Email chưa hợp lệ');
      return;
    }

    if (password.length < 6) {
      setError('Mật khẩu cần ít nhất 6 ký tự');
      return;
    }

    setError('');
    // Gọi API đăng nhập ở đây
  }

  return (
    <View style={styles.container}>
      <TextInput
        value={email}
        onChangeText={setEmail}
        placeholder="Email"
        keyboardType="email-address"
        autoCapitalize="none"
        style={styles.input}
      />
      <TextInput
        value={password}
        onChangeText={setPassword}
        placeholder="Mật khẩu"
        secureTextEntry
        style={styles.input}
      />
      {!!error && <Text style={styles.error}>{error}</Text>}
      <Button title="Tiếp tục" onPress={handleSubmit} />
    </View>
  );
}

Ví dụ này đủ cho người mới hiểu: form có state, input cập nhật state, submit kiểm tra dữ liệu, lỗi được hiển thị bằng state.

Những prop hữu ích của TextInput

placeholder gợi ý nội dung. keyboardType chọn kiểu bàn phím phù hợp như email, number. autoCapitalize tránh tự viết hoa email. secureTextEntry dùng cho mật khẩu. returnKeyType giúp nút enter trên bàn phím có ý nghĩa hơn.

Đừng quên keyboard

Trên mobile, bàn phím có thể che input hoặc nút submit. Với form dài, bạn nên dùng KeyboardAvoidingView và ScrollView hợp lý để người dùng không bị kẹt khi nhập liệu.

import { KeyboardAvoidingView, Platform } from 'react-native';

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : undefined}
  style={{ flex: 1 }}
>
  {/* Form content */}
</KeyboardAvoidingView>

Lỗi thường gặp

Lỗi đầu tiên là input không có state nên khó submit. Lỗi thứ hai là quên autoCapitalize="none" cho email. Lỗi thứ ba là không hiển thị error rõ ràng. Lỗi thứ tư là không test với keyboard thật trên thiết bị, khiến input cuối màn hình bị che.

Kết luận

Form tốt không chỉ là vài ô nhập. Nó cần state rõ ràng, validation vừa đủ, thông báo lỗi dễ hiểu và layout thân thiện với bàn phím. Khi nắm chắc TextInput và controlled input, bạn đã có nền để làm login, search, profile và nhiều flow nhập liệu khác.

Nguồn tham khảo: React Native: TextInput, KeyboardAvoidingView, Platform.