Блог

Как правильно управлять выбором входного элемента? Аналогично тому, как мы управляем значением ввода, устанавливая атрибуты value и onChange , можно ли сделать то же самое для выделения текста, когда он сфокусирован? Вот моя первая попытка:

 function Input() {
  const inputRef = useRef(null);
  const [selection, setSelection] = useState({ start: 0, end: 0 });

  useLayoutEffect(() => {
    inputRef.current.setSelectionRange(selection.start, selection.end);
  }, [selection.start, selection.end]);

  return (
    <input
      ref={inputRef}
      onSelect={(e) => {
        setSelection({
          start: e.currentTarget.selectionStart || 0,
          end: e.currentTarget.selectionEnd || 0,
        });
      }}
    />
  );
}
 

JSFiddle

Единственная проблема заключается в том, что когда я набираю несколько символов, а затем SHIFTLEFT ARROWнесколько раз нажимаю , чтобы выбрать влево, кажется, что конец выделения смещается влево при каждом нажатии другой клавиши.