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

Question

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

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

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

我知道使用onChange,onClick和onFocus事件将标记可能发生了位置更改（即单击鼠标，或者说使用左/右箭头按钮移动，或键入某些内容），但是如果我有对文本的引用-field 对象，哪个方法或属性将允许我确定插入符号的确切位置（索引值0 .. n-1）？

在 中jQuery，我认为这可以通过selectionStart属性获得，那么 MaterialUI 文本字段的最佳方式究竟是什么？

非常感谢。

Answer 1

您可以使用inputRef道具获得裁判的inputDOM元素。然后可以使用该引用来获取selectionStartDOM 元素属性。

工作示例：

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