Текстовое поле пользовательского интерфейса, текущая позиция курсора

Question

Как получить текущую позицию курсора (каретки) в текстовом поле materialUI?

https://material -ui.com / components / text-fields /

По сути, мне нужно изменить содержимое строки по определенному индексу (например, вставить символ X между символами № 3 и № 4).

Я понимаю, что используя onChange,События onClick и onFocus будут отмечать, что изменение позиции могло произойти (например, щелкнуть мышью или, скажем, перемещаться с помощью кнопок со стрелками влево / вправо или что-то ввести), но затем, если у меня есть ссылка на текст-объект, какой метод или свойство тогда позволило бы мне определить, где именно расположена каретка (значение индекса 0 .. n-1)?

В jQuery, я думаю, это можно получить с помощью selectionStartсвойство, так как именно это лучший способ для текстового поля MaterialUI?

Большое спасибо.

Answer 1

Вы можете использовать inputRef prop , чтобы получить ref для элемента input DOM. Затем эта ссылка может быть использована для получения свойства selectionStart элемента DOM.

Рабочий пример:

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";

function App() {
  const inputRef = React.useRef();
  const [selectionStart, setSelectionStart] = React.useState();
  const updateSelectionStart = () =>
    setSelectionStart(inputRef.current.selectionStart);
  return (
    <div className="App">
      <TextField
        onSelect={updateSelectionStart}
        inputRef={inputRef}
        defaultValue="Initial Text"
      />
      <br />
      <br />
      selectionStart: {selectionStart}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);