Sobes Expert - База вопросов технических собеседований

Как обрабатывать текст, введённый пользователем?

Обработка текста, введённого пользователем в React Native, осуществляется с помощью компонента TextInput и механизмов управления состоянием, чаще всего через хук useState. Текст, который пользователь вводит в поле ввода, можно сохранить, изменять, валидировать и использовать для различных целей: отправки на сервер, отображения на экране, фильтрации данных и т.д.

Основной механизм: TextInput + useState

import React, { useState } from 'react';
import { TextInput, View, Text, StyleSheet } from 'react-native';
export default function App() {
const \[text, setText\] = useState('');
return (
&lt;View style={styles.container}&gt;
<TextInput
style={styles.input}
placeholder="Введите текст"
value={text}
onChangeText={setText}
/>
&lt;Text&gt;Вы ввели: {text}&lt;/Text&gt;
&lt;/View&gt;
);
}
const styles = StyleSheet.create({
container: {
padding: 20,
},
input: {
borderWidth: 1,
borderColor: '#aaa',
padding: 10,
borderRadius: 5,
marginBottom: 10,
},
});

value связывает поле с состоянием.
onChangeText вызывается при каждом изменении текста и обновляет text в useState.

Как работает onChangeText

Функция onChangeText автоматически получает новое значение каждый раз, когда пользователь набирает или удаляет символ. Это значение передаётся в setText, обновляя состояние.

Пример с обработкой текста вручную:

onChangeText={(value) => {
const filtered = value.toUpperCase();
setText(filtered);
}}

Обработка и модификация текста

Преобразование текста в верхний/нижний регистр

setText(text.toUpperCase());
setText(text.toLowerCase());

Удаление пробелов

setText(text.trim());

Фильтрация символов (например, только цифры)

const onlyDigits = value.replace(/\[^0-9\]/g, '');
setText(onlyDigits);

Обработка нескольких полей

const \[form, setForm\] = useState({
name: '',
email: '',
});
const handleChange = (field, value) => {
setForm((prev) => ({ ...prev, \[field\]: value }));
};
<TextInput
placeholder="Имя"
value={form.name}
onChangeText={(val) => handleChange('name', val)}
/>
<TextInput
placeholder="Email"
value={form.email}
onChangeText={(val) => handleChange('email', val)}
/>

Валидация введённого текста

Пример базовой проверки email:

const handleSubmit = () => {
if (!form.email.includes('@')) {
Alert.alert('Неверный email');
return;
}
console.log('Email корректен:', form.email);
};

Обработка ввода при нажатии "Enter" или "Done"

Для этого используется onSubmitEditing:

<TextInput
onSubmitEditing={() => console.log('Пользователь нажал Enter')}
returnKeyType="done"
/>

Можно также использовать blurOnSubmit={false} для многострочных полей.

Реакция на каждое изменение (например, фильтрация)

Можно использовать useEffect:

useEffect(() => {
if (text.length > 3) {
console.log('Текст достаточно длинный');
}
}, \[text\]);

Преобразование и отображение текста в реальном времени

&lt;Text&gt;Символов: {text.length}&lt;/Text&gt;
&lt;Text&gt;Без пробелов: {text.replace(/\\s/g, '')}&lt;/Text&gt;

Указание типа ввода

С помощью keyboardType можно настроить подходящую клавиатуру:

&lt;TextInput keyboardType="numeric" /&gt;
&lt;TextInput keyboardType="email-address" /&gt;
&lt;TextInput keyboardType="phone-pad" /&gt;

Обработка паролей

<TextInput
secureTextEntry
placeholder="Пароль"
value={password}
onChangeText={setPassword}
/>

Отображение/скрытие пароля

const \[visible, setVisible\] = useState(false);
<TextInput
secureTextEntry={!visible}
value={password}
onChangeText={setPassword}
/>
&lt;TouchableOpacity onPress={() =&gt; setVisible((v) => !v)}>
&lt;Text&gt;{visible ? 'Скрыть' : 'Показать'}&lt;/Text&gt;
&lt;/TouchableOpacity&gt;

Очистка поля

setText('');

Или добавить кнопку:

&lt;TouchableOpacity onPress={() =&gt; setText('')}>
&lt;Text&gt;Очистить&lt;/Text&gt;
&lt;/TouchableOpacity&gt;

Использование с Formik и react-hook-form

Можно использовать сторонние библиотеки для управления формами и валидацией, где всё основано на отслеживании текста и изменениях.

Пример с Formik:

&lt;Formik initialValues={{ name: '' }} onSubmit={(values) =&gt; console.log(values)}>
{({ handleChange, handleBlur, handleSubmit, values }) => (
<TextInput
value={values.name}
onChangeText={handleChange('name')}
onBlur={handleBlur('name')}
/>
)}
&lt;/Formik&gt;

События и методы ввода

Событие	Описание
onChangeText	Текст изменился
---	---
onBlur	Потеря фокуса
---	---
onFocus	Получение фокуса
---	---
onSubmitEditing	Нажатие клавиши подтверждения (Enter/Done)
---	---
onEndEditing	Окончание редактирования
---	---
onKeyPress	Нажатие клавиши (например, Backspace)
---	---

Пример:

<TextInput
onFocus={() => console.log('Фокус')}
onBlur={() => console.log('Потеря фокуса')}
onKeyPress={({ nativeEvent }) => {
if (nativeEvent.key === 'Backspace') {
console.log('Удалён символ');
}
}}
/>

Обработка чисел, дат, телефонов и др.

React Native не имеет отдельных компонентов для ввода чисел или дат, но можно использовать TextInput с кастомной логикой или сторонние библиотеки:

react-native-masked-text — маски ввода
react-native-phone-input — номера телефонов
react-native-datepicker — выбор даты

Пример числового ввода:

<TextInput
value={amount}
onChangeText={(val) => {
const clean = val.replace(/\[^0-9\]/g, '');
setAmount(clean);
}}
keyboardType="numeric"
/>

Частые ошибки и советы

Нельзя использовать onChange — он работает в Web, но не в React Native. Используйте onChangeText.
Состояние должно быть строкой, даже если вы вводите число (в TextInput всё — строка).
Не забывайте про autoCapitalize="none" при вводе email, логинов и т.п.
Используйте trim() для удаления пробелов при отправке данных.

В React Native весь ввод текста пользователем обрабатывается через TextInput, отслеживается через состояние (useState) и может быть модифицирован, очищен, валидирован, анализирован и передан в другие компоненты или API. Это даёт полную гибкость для построения любых форм, полей ввода, чатов, фильтров и других интерактивных интерфейсов.

08-08-2025

Easy 10 просмотров