React中如何让下拉框定位在TextField的当前光标位置？

问题场景 #

• 现有功能：输入$时显示粉色下拉框，此功能正常
• 需求目标：
  • 再次输入$时，下拉框自动定位到最新光标位置
  • 在文本开头输入$时，下拉框从之前位置移至初始位置
• 当前异常：下拉框会随点击文本框的任意位置移动，上述需求未实现

正常场景示例 #

异常场景示例 #

原代码 #

import { useState, useRef } from "react";
export default function App() {
  const [value, setValue] = useState("");
  const [show, setShow] = useState(false);
  const [cursor, setCursor] = useState(0);
  const ref = useRef(null);

  const foo = (e) => {
    setValue(e.target.value);
    if (e.nativeEvent.data === "$") {
      setShow(true);
    } else {
      setShow(false);
    }
    setCursor(Math.min(e.target.value?.length, 22) * 8);
  };
  const boo = (e) => {
    console.log(e.clientX);
    setCursor(e.clientX);
  };
  return (
    <div className="App">
      <input value={value} onChange={foo} ref={ref} onKeyDown={boo} />
      {show && (
        <div
          style={{
            width: "210px",
            height: "210px",
            background: "pink",
            marginLeft: cursor + "px",
            position: "absolute",
            left: "2px",
          }}
        >
          -DropDown-
        </div>
      )}
    </div>
  );
}

问题分析 #

1. onKeyDown绑定的boo函数会在任意按键触发时更新cursor为鼠标点击的clientX，导致下拉框随点击位置随意移动
2. 原cursor计算方式（文本长度*8）是基于文本总长度，而非实际光标位置，无法精准对应光标所在的像素偏移
3. 未处理光标在文本开头的特殊场景，导致开头输入$时位置计算错误

修复方案 #

核心修改点 #

• 移除onKeyDown的boo函数，仅在输入$时更新下拉框位置
• 通过selectionStart获取输入框内的实际光标位置
• 用临时DOM元素模拟输入框文本，精准计算光标位置对应的像素偏移

修复后代码 #

import { useState, useRef } from "react";
export default function App() {
  const [value, setValue] = useState("");
  const [show, setShow] = useState(false);
  const [cursorOffset, setCursorOffset] = useState(0);
  const inputRef = useRef(null);

  const calculateCursorOffset = (cursorPosition) => {
    if (!inputRef.current) return 0;
    // 创建临时span模拟输入框的文本样式，计算光标位置宽度
    const tempSpan = document.createElement("span");
    tempSpan.style.font = window.getComputedStyle(inputRef.current).font;
    tempSpan.style.visibility = "hidden";
    tempSpan.style.position = "absolute";
    tempSpan.textContent = value.slice(0, cursorPosition);
    document.body.appendChild(tempSpan);
    const width = tempSpan.offsetWidth;
    document.body.removeChild(tempSpan);
    return width;
  };

  const handleInputChange = (e) => {
    const newValue = e.target.value;
    setValue(newValue);
    const input = e.target;
    // 仅在输入$时更新下拉框状态和位置
    if (e.nativeEvent.data === "$") {
      setShow(true);
      // 获取当前光标位置
      const cursorPos = input.selectionStart;
      // 计算光标对应的像素偏移
      const offset = calculateCursorOffset(cursorPos);
      setCursorOffset(offset);
    } else {
      setShow(false);
    }
  };

  return (
    <div className="App">
      <input value={value} onChange={handleInputChange} ref={inputRef} />
      {show && (
        <div
          style={{
            width: "210px",
            height: "210px",
            background: "pink",
            marginLeft: `${cursorOffset}px`,
            position: "absolute",
            left: inputRef.current?.getBoundingClientRect().left + "px",
            top: inputRef.current?.getBoundingClientRect().bottom + "px",
          }}
        >
          -DropDown-
        </div>
      )}
    </div>
  );
}

修复说明 #

1. 精准获取光标位置：通过input.selectionStart直接获取输入框内光标所在的索引位置
2. 像素偏移计算：创建临时span元素，完全继承输入框的字体样式，截取光标前的文本计算宽度，确保偏移位置完全匹配光标实际位置
3. 定位优化：下拉框的left改为基于输入框的实际位置计算，避免页面布局变化导致的偏移错误
4. 触发逻辑限制：仅当输入$时才更新下拉框的显示状态和位置，其他操作不会触发位置变更

测试验证 #

• 在文本任意位置输入$，下拉框会精准定位到光标所在位置
• 在文本开头输入$，下拉框会自动移至输入框起始位置
• 点击输入框其他位置或输入非$字符，下拉框不会随意移动

内容的提问来源于stack exchange，提问作者Sougata Mukherjee