材质UI文本字段，当前光标位置

Question

如何获取materialUI文本字段中的当前光标（插入符号）位置？

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

基本上，我需要在特定索引处修改字符串内容（例如，在char＃3和char＃4之间插入一个char X）。

我了解使用onChange，onClick和onFocus事件将标记可能已发生位置更改（即单击鼠标，或者说使用向左/向右移动箭头按钮，或键入一些东西），但是如果我引用了文本字段对象，那么哪种方法或属性将允许我确定插入符号的确切位置（索引值0 .. n-1）？

在jQuery中，我认为可以通过selectionStart属性来获得，那么MaterialUI文本字段的最佳方法到底是什么？

非常感谢。

Answer 1

您可以使用inputRef prop来向input DOM元素获取ref。然后，该引用可用于获取DOM元素的selectionStart属性。

工作示例：

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);