Как выделить текст в input по клику в react.js?

@vladimir 

В React, выделение текста в <input> может быть реализовано с помощью свойства ref и метода select().

Для этого, вы можете создать референс для вашего <input> и использовать его в обработчике события onClick:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

import React, { useRef } from 'react';

function App() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.select();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>Select text</button>
    </div>
  );
}

export default App;

В этом примере, мы создаем референс inputRef для нашего <input> с помощью useRef(). Затем мы передаем этот референс в ref атрибут <input>. В обработчике события onClick кнопки, мы вызываем inputRef.current.select(), чтобы выделить текст в <input>.

@vladimir 

Следующая часть кода добавляет функциональности после клика:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

const inputRef = useRef(null);

const handleClick = () => {
  inputRef.current.select();
};

return (
  <div>
    <input ref={inputRef} />
    <button onClick={handleClick}>Выделить текст</button>
  </div>
);

В этом коде мы создали ссылку inputRef с помощью useRef(null) и передали эту ссылку в атрибут ref для input. Затем мы создали функцию handleClick, которая вызывается при нажатии на кнопку. Внутри этой функции мы вызываем метод select() на inputRef.current, чтобы выделить текст в input

Поместите этот код в ваш компонент и при клике на кнопку "Выделить текст" в вашем input будет выбран весь текст.