react material-uI 版本5.12.2 TextField组件的光标显示的位置如何获取

要获取 TextField 组件中光标的位置，可以使用 `ref` 属性获取到 TextField 组件的引用，然后访问其 `selectionStart` 和 `selectionEnd` 属性来获取光标的起始和结束位置。

例如，首先给 TextField 组件设置一个 `ref` 属性：

import { TextField } from '@mui/material';

function MyTextField() {
  const textFieldRef = React.useRef(null);

  return (
    <TextField inputRef={textFieldRef} label="My TextField" />
  );
}

然后，在需要获取光标位置的地方，可以访问 `textFieldRef.current.selectionStart` 和 `textFieldRef.current.selectionEnd` 属性来获取光标的位置，例如：

function handleCursorPosition() {
  const textField = textFieldRef.current;
  const startPos = textField.selectionStart;
  const endPos = textField.selectionEnd;
  console.log(`Cursor position: ${startPos}-${endPos}`);
}

相关问题

react material-uI 版本5.12.2 如何获取TextField组件的光标坐标位置

要获取 TextField 组件的光标坐标位置，可以使用 `TextField` 组件的 `inputRef` 属性来获取底层 `<input>` 元素的引用，然后使用 `selectionStart` 属性来获取光标位置。

以下是一个示例代码：

import { useRef } from "react";
import TextField from "@mui/material/TextField";

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

  const handleFocus = () => {
    const cursorPos = inputRef.current.selectionStart;
    console.log(cursorPos);
  };

  return (
    <TextField
      inputRef={inputRef}
      label="My Label"
      onFocus={handleFocus}
    />
  );
}

在上面的代码中，我们使用 `useRef` hook 创建了一个 `inputRef` 引用，将其传递给 `TextField` 组件的 `inputRef` 属性。然后，在 `TextField` 组件的 `onFocus` 事件处理程序中，我们使用 `selectionStart` 属性获取光标位置，并将其打印到控制台上。

react material-uI 版本5.12.2 TextField组件的光标位置显示popper组件怎么做

你可以使用 `InputAdornment` 组件作为 `TextField` 的 `endAdornment` 属性，然后在 `InputAdornment` 组件中使用 `Popper` 组件来显示光标位置的 `Popper` 组件。以下是一个示例代码：

import { useState } from "react";
import TextField from "@mui/material/TextField";
import InputAdornment from "@mui/material/InputAdornment";
import Popper from "@mui/material/Popper";

export default function App() {
  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);

  return (
    <div>
      <TextField
        label="Text"
        InputProps={{
          endAdornment: (
            <InputAdornment position="end">
              <div onClick={handleClick}>{anchorEl ? "↑" : "↓"}</div>
            </InputAdornment>
          )
        }}
      />
      <Popper open={open} anchorEl={anchorEl} placement="bottom">
        <div style={{ padding: "10px" }}>Cursor position</div>
      </Popper>
    </div>
  );
}

在这个示例中，当用户点击 `TextField` 中的 `InputAdornment` 组件时，会将 `anchorEl` 状态设置为 `event.currentTarget`，这样 `Popper` 组件就会显示在 `InputAdornment` 组件的底部。`Popper` 组件的内容可以根据需要自定义。当用户点击其他地方时，`handleClose` 函数会将 `anchorEl` 状态设置为 `null`，关闭 `Popper` 组件。