input 获取光标位置设置光标位置方案

const inputDom = document.getElementById("input")
const selectionStart = inputDom.selectionStart

inputDom.focus()
// focus() 异步，所以加了 setTimeout
setTimeout(() => {
  const nextSelection = selectionStart + 1
  inputDom.setSelectionRange(nextSelection, nextSelection)
}, 0)

import React, { useState, useRef } from 'react'
import { throttle } from 'lodash'
import { Input, Button, Tag } from 'antd'
const SHORTCUT = [0, '*', '#', 9]
const InputPro = () => {
  const [value, setValue] = useState('')
  const inputRef = useRef()
  const handleSubmit = throttle(() => {
    console.log('value', value)
  }, 3000)
  const handleInputChange = e => {
    setValue(e.target.value?.trim())
  }
  const handleTagChange = val => {
    const inputDom = inputRef.current?.input || {}
    let selectionStart = inputDom.selectionStart
    if (typeof selectionStart !== 'number') {
      selectionStart = value.length
    }
    const data = `${value.slice(
      0,
      selectionStart,
    )}${val}${value.slice(selectionStart)}`
    if (data.length <= 25) {
      setValue(data)
      inputDom.focus()
      setTimeout(() => {
        const nextSelection = selectionStart + 1
        inputDom.setSelectionRange(nextSelection, nextSelection)
      }, 0)
    }
  }
  return (
    <div>
      <Input.Group compact>
        <Input
          allowClear
          style={{ width: 160 }}
          maxLength={25}
          placeholder='请输入'
          value={value}
          onChange={handleInputChange}
          ref={inputRef}
        />
        <Button
          type='primary'
          onClick={handleSubmit}
          disabled={value.length === 0}
        >
          确认
        </Button>
      </Input.Group>
      <div style={{ display: 'flex', alignItems: 'center', marginTop: 8 }}>
        {SHORTCUT.map(itm => (
          <div key={itm} onClick={() => handleTagChange(itm)}>
            <Tag color="#108ee9">{itm}</Tag>
          </div>
        ))}
      </div>
    </div>
  )
}
export default InputPro