React Native: как выделить весь текст в TextInput в фокусе

Чтобы при вводе текста React Native выбрать весь текст в фокусе, вы можете использовать следующие методы:

  1. Использование обработчика событий onFocus. Вы можете прикрепить обработчик событий onFocusк текстовому вводу и использовать метод selectAllдля выберите весь текст, когда ввод сфокусирован. Вот пример:
import React, { useRef } from 'react';
import { TextInput } from 'react-native';
const MyComponent = () => {
  const inputRef = useRef(null);
  const handleFocus = () => {
    inputRef.current?.selectAll();
  };
  return (
    <TextInput
      ref={inputRef}
      onFocus={handleFocus}
// Other TextInput props
    />
  );
};
export default MyComponent;
  1. Использование метода setSelection. Вы также можете использовать метод setSelectionдля программного выбора текста во входных данных. В этом случае вам необходимо знать начальную и конечную позиции текста. Чтобы выделить весь текст, вы можете установить начальную позицию на 0, а конечную позицию на длину текста. Вот пример:
import React, { useRef } from 'react';
import { TextInput } from 'react-native';
const MyComponent = () => {
  const inputRef = useRef(null);
  const handleFocus = () => {
    const textLength = inputRef.current?.value.length || 0;
    inputRef.current?.setSelection(0, textLength);
  };
  return (
    <TextInput
      ref={inputRef}
      onFocus={handleFocus}
// Other TextInput props
    />
  );
};
export default MyComponent;