React中如何让下拉框跟随文本框光标位置显示？

问题根源 #

原代码通过字符数×8px估算光标位置，存在两个核心问题：

• 不同字符实际宽度存在差异（半角/全角、中英文等），固定宽度计算误差大
• 输入内容超出输入框可视范围时，输入框会滚动，字符数计算的位置和光标实际页面位置完全脱节

修复思路 #

借助浏览器原生API获取光标在页面中的精确坐标：

1. 通过输入框的选区信息结合window.getSelection()获取光标对应的范围
2. 用getBoundingClientRect()获取该范围的页面坐标，同时考虑页面滚动偏移
3. 基于精确坐标定位下拉框，确保始终跟随光标

修改后的完整代码 #

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

  const handleInputChange = (e) => {
    const input = e.target;
    setValue(input.value);

    const isTriggered = e.nativeEvent.data === "$";
    setShow(isTriggered);

    if (isTriggered && inputRef.current) {
      const selection = window.getSelection();
      if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        const rangeRect = range.getBoundingClientRect();
        
        setDropdownPosition({
          left: rangeRect.left + window.scrollX,
          top: rangeRect.bottom + window.scrollY
        });
      }
    }
  };

  return (
    <div className="App" style={{ position: "relative", padding: "20px" }}>
      <input 
        value={value} 
        onChange={handleInputChange} 
        ref={inputRef} 
        style={{ padding: "6px 10px", fontSize: "14px" }}
      />
      {show && (
        <div
          style={{
            width: "200px",
            height: "200px",
            background: "#ccc",
            position: "absolute",
            left: `${dropdownPosition.left}px`,
            top: `${dropdownPosition.top}px`,
            margin: 0,
            zIndex: 10
          }}
        >
          DropDown
        </div>
      )}
    </div>
  );
}

关键改动说明 #

• 移除原有的cursor状态，改用dropdownPosition存储光标精确坐标
• 使用window.getSelection()和getBoundingClientRect()获取光标在页面中的真实位置，解决滚动和字符宽度差异导致的错位
• 将父容器设置为相对定位，配合下拉框的绝对定位，确保定位逻辑更稳定
• 增加zIndex确保下拉框不会被其他元素遮挡

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