Метод focus
Метод focus компонента
TextInput
вызывают у ref на поле: fieldRef.current.focus().
После вызова курсор оказывается в поле, и система показывает клавиатуру.
Синтаксис
fieldRef.current.focus();
Параметры
| Параметр | Описание |
|---|---|
| - | Аргументы не передают. |
Пример
Давайте поставим фокус в поле по нажатию кнопки:
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.focus()}
/>
</View>
);
}
На экране видно поле и кнопку. После нажатия кнопки фокус переходит в поле и открывается клавиатура.
Пример
Давайте сразу после открытия экрана вызовем focus:
import { useEffect, useRef, useState } from 'react';
import { TextInput } from 'react-native';
export default function App() {
const fieldRef = useRef(null);
const [text, setText] = useState('');
useEffect(() => {
fieldRef.current?.focus();
}, []);
return (
<TextInput
ref={fieldRef}
value={text}
onChangeText={setText}
placeholder="abcde"
/>
);
}
На экране поле сразу получает фокус, и клавиатура появляется без дополнительного нажатия.
