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` 组件。