前端/控制光标

网上的例子，借鉴后修改为react版本

<form id="form1" name="form1" method="post" action="">
    <label>
        <textarea name="text" id="text" cols="45" rows="10">
        这是测试内容，请在任意位置插入内容。
        这是测试内容，请在任意位置插入内容。
        这是测试内容，请在任意位置插入内容。
        这是测试内容，请在任意位置插入内容。
        这是测试内容，请在任意位置插入内容。
        这是测试内容，请在任意位置插入内容。
        这是测试内容，请在任意位置插入内容。
        这是测试内容，请在任意位置插入内容。
        这是测试内容，请在任意位置插入内容。
        这是测试内容，请在任意位置插入内容。
        这是测试内容，请在任意位置插入内容。
        这是测试内容，请在任意位置插入内容。
        </textarea>

        <a id="insert" href="javascript:void(0);">{PHP code here}</a>
    </label>
</form>
<script type="text/javascript">
    var text = document.getElementById('text');
    var insert = document.getElementById('insert');
    insert.onclick = function () {
        insertAtCursor(text, this.innerHTML);
    };

    function insertAtCursor(myField, myValue) {
        if (document.selection) {
            //IE support
            myField.focus();
           var sel = document.selection.createRange();
            sel.text = myValue;
            sel.select();
        } else if (myField.selectionStart || myField.selectionStart == '0') {
            //MOZILLA/NETSCAPE support
            var startPos = myField.selectionStart;
            var endPos = myField.selectionEnd;
            var beforeValue = myField.value.substring(0, startPos);
            var afterValue = myField.value.substring(endPos, myField.value.length);

            myField.value = beforeValue + myValue + afterValue;

            myField.selectionStart = startPos + myValue.length;
            myField.selectionEnd = startPos + myValue.length;
            myField.focus();
        } else {
            myField.value += myValue;
            myField.focus();
        }
    }
</script>

我自己的例子 react 版本

const numberKeyPress = (key) => {
  let inputDom = document.getElementById('input');
  insertAtCursor(inputDom, key);
};
const insertAtCursor = (myField, myValue) => {
  if (document.selection) {
    //IE support
    myField.focus();
    let sel = document.selection.createRange();
    sel.text = myValue;
    sel.select();
  } else if (myField.selectionStart || myField.selectionStart == '0') {
    //MOZILLA/NETSCAPE support
    var startPos = myField.selectionStart;
    var endPos = myField.selectionEnd;
    var beforeValue = myField.value.substring(0, startPos);
    var afterValue = myField.value.substring(endPos, myField.value.length);

    myField.value = beforeValue + myValue + afterValue;
    setInputValue(beforeValue + myValue + afterValue);
    myField.selectionStart = startPos + myValue.toString().length;
    myField.selectionEnd = startPos + myValue.toString().length;
    myField.focus();
  } else {
    myField.value += myValue;
    myField.focus();
  }
};
const backspace = () => {
  let inputDom = document.getElementById('input');

  let selectionEnd = inputDom.selectionEnd;

  if (selectionEnd === 0) {
    return;
  }
  let arr = inputValue.split('');
  arr.splice(selectionEnd - 1, 1);
  let str = arr.join('');
  setInputValue(str);

  inputDom.focus();
  //必须加延时
  // 在浏览器默认行为focus之后执行, 实现非阻塞;
  setTimeout(() => {
    inputDom.selectionEnd = selectionEnd - 1;
  }, 0);
};

      <Input
          prefix={<SearchOutlined />}
          size="large"
          placeholder={placeholder}
          id="input"
          value={inputValue}
          onChange={(e) => {
            setInputValue(e.target.value);
          }}
        />