在 React 中，Input 失去焦点时获取失去焦点的位置并插入值

实现思路：

监听 Input 失去焦点 (onBlur) 事件 ：在 onBlur 事件中，我们可以获取光标的当前位置以及 Input 中的值。
使用 onClick 或 onMouseDown 事件来获取点击的其他位置：通过全局点击监听，获取点击的目标元素。
插入值到光标位置 ：通过 DOM 的 selectionStart 和 selectionEnd 来确定光标位置，进而插入新的值。

示例代码：

javascript 复制代码

import React, { useState, useRef } from 'react';

const InputWithInsert = () => {
  const [inputValue, setInputValue] = useState('');  // Input的值
  const inputRef = useRef(null);  // 引用 Input 组件
  const [focusPosition, setFocusPosition] = useState(null); // 光标位置

  // 监听 Input 的变化
  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  // 监听 Input 失去焦点时，记录光标位置
  const handleBlur = (e) => {
    const input = inputRef.current;
    if (input) {
      const cursorPosition = input.selectionStart;  // 获取失去焦点时的光标位置
      setFocusPosition(cursorPosition);
    }
  };

  // 插入值到光标位置
  const insertValueAtCursor = (value) => {
    const input = inputRef.current;
    if (input && focusPosition !== null) {
      const beforeCursor = inputValue.substring(0, focusPosition);
      const afterCursor = inputValue.substring(focusPosition);
      const newValue = beforeCursor + value + afterCursor;
      setInputValue(newValue);
    }
  };

  // 模拟点击插入值
  const handleClickInsert = () => {
    insertValueAtCursor('[插入内容]');  // 模拟插入内容
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        onBlur={handleBlur}  // 监听失去焦点事件
        ref={inputRef}       // 引用 Input 组件
      />
      <button onClick={handleClickInsert}>插入值</button>
    </div>
  );
};

export default InputWithInsert;

inputRef ：用来引用 <input> 元素，以便在失去焦点时获取光标位置。
handleBlur ：在 Input 失去焦点时记录光标位置（使用 selectionStart 获取光标的位置）。
insertValueAtCursor：根据失去焦点时保存的光标位置，将指定的内容插入到该位置。