Ввод текста: TextInput

Учимся принимать текст от пользователя через TextInput — мобильный аналог поля input.

TextInput — компонент для ввода текста; в связке с состоянием он становится управляемым (controlled) полем.

Базовое поле

В отличие от HTML <input>, у TextInput событие изменения называется onChangeText и сразу отдаёт строку, а не событие. Это удобнее.

import { TextInput } from "react-native";

function SimpleInput() {
  return (
    <TextInput
      placeholder="Введите имя"
      onChangeText={(text) => console.log(text)}
    />
  );
}

Управляемое поле (controlled)

Как и в React, правильный подход — хранить значение в состоянии и связывать его с полем через value. Тогда состояние — единственный источник правды.

import { useState } from "react";
import { TextInput, Text, View } from "react-native";

function NameForm() {
  const [name, setName] = useState("");
  return (
    <View>
      <TextInput
        value={name}
        onChangeText={setName}
        placeholder="Ваше имя"
      />
      <Text>Привет, {name}!</Text>
    </View>
  );
}

Здесь value={name} связывает поле с состоянием, а onChangeText={setName} обновляет его при каждом нажатии клавиши. Текст под полем меняется в реальном времени.

Полезные пропсы

Правильная клавиатура

Мобильная фишка: можно показать пользователю подходящую клавиатуру. Для телефона — цифровую, для почты — с символом @.

import { TextInput } from "react-native";

function PhoneInput() {
  return (
    <TextInput
      keyboardType="numeric"
      placeholder="Номер телефона"
    />
  );
}

Поле пароля

import { TextInput } from "react-native";

function PasswordInput() {
  return (
    <TextInput
      secureTextEntry
      placeholder="Пароль"
    />
  );
}

Почему управляемое поле лучше

Можно было бы просто слушать onChangeText и нигде не хранить значение. Но тогда вы не сможете программно очистить поле, подставить в него значение или показать введённый текст где-то ещё. Управляемый подход делает состояние единственным источником правды: что в состоянии — то и на экране. Это особенно важно в формах, где после отправки поле надо очистить (setName("")) или заполнить данными для редактирования.

Несколько полей в форме

В реальной форме полей несколько. Каждое связывают со своим состоянием — паттерн один и тот же, просто повторяется.

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

function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  return (
    <View>
      <TextInput value={email} onChangeText={setEmail} placeholder="Email" keyboardType="email-address" />
      <TextInput value={password} onChangeText={setPassword} placeholder="Пароль" secureTextEntry />
    </View>
  );
}

Валидация — обычный JS

Проверка введённого — обычный JavaScript. Простой пример валидации почты (запускаемый):

function isValidEmail(text) {
  return text.includes("@") && text.includes(".");
}

console.log(isValidEmail("[email protected]"));
console.log(isValidEmail("неверно"));

Вывод:

true
false

Итог

• TextInput — поле ввода; событие onChangeText сразу отдаёт строку.
• Управляемое поле: связь value с состоянием + обновление через onChangeText.
• keyboardType и secureTextEntry дают нужную клавиатуру и скрытый ввод.