Метод blur

Метод blur компонента TextInput вызывают у ref: fieldRef.current.blur(). Поле перестает быть активным, клавиатура обычно скрывается.

Синтаксис

fieldRef.current.blur();

Параметры

Параметр	Описание
-	Аргументы не передают.

Пример

Давайте спрячем клавиатуру кнопкой через blur:

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

export default function App() {
	const fieldRef = useRef(null);
	const [text, setText] = useState('abcde');

	return (
		<View>
			<TextInput
				ref={fieldRef}
				value={text}
				onChangeText={setText}
			/>
			<Button
				title="12345"
				onPress={() => fieldRef.current.blur()}
			/>
		</View>
	);
}

На экране поле и кнопка. После нажатия кнопки фокус уходит с поля, клавиатура закрывается.

Пример

Давайте снимем фокус после отправки по кнопке действия:

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

export default function App() {
	const fieldRef = useRef(null);
	const [text, setText] = useState('12345');

	return (
		<TextInput
			ref={fieldRef}
			value={text}
			onChangeText={setText}
			returnKeyType="done"
			onSubmitEditing={() => fieldRef.current.blur()}
		/>
	);
}

На экране поле с текстом '12345'. После нажатия кнопки готово на клавиатуре фокус снимается.

Смотрите также

метод focus,
который ставит фокус в поле
метод dismiss,
который закрывает клавиатуру у класса Keyboard
компонент TextInput,
который принимает текст с клавиатуры
перечисление ReturnKeyType,
которое задает подпись кнопки действия