使用组件 fusion.design Input.TextArea，属性 composition开启后会过滤输入法中间字母状态，文字输入完成后才会触发 onChange
<Input.TextArea
value={value}
composition
onChange={handleChange}
/>
const [value, setValue] = useState('')
const [cursorPos, setCursorPos] = useState([0, 0])
const handleChange = (value, event) => {
// console.log(value, event.target.value, event.target.selectionStart)
const start = event.target.selectionStart
const end = event.target.selectionEnd
// 过滤非中文字符
// 一-龥: 匹配中文字符。
// \p{P}: 匹配 Unicode 中的所有标点符号。
// \u3000-\u303F: 匹配全角空格及一些中文标点符号。
// \uFF00-\uFFEF: 匹配全角字符及一些特殊符号。
// \n: 允许回车符。
const filteredValue = value.replace(/[^一-龥\p{P}\u3000-\u303F\uFF00-\uFFEF\n]/gu, '')
// 计算新的光标位置
let newStart = start
let newEnd = end
if (filteredValue.length !== value.length) {
// 如果过滤后长度发生了变化，需要重新计算光标位置
const diff = value.length - filteredValue.length
newStart -= diff
newEnd -= diff
}
// 设置新的值
setValue(filteredValue)
// setValue(value)
// 记录光标位置
setCursorPos([newStart, newEnd])
}
useEffect(() => {
// 每次值变化后调整光标位置
const inputEl = document.activeElement
if (inputEl && inputEl.setSelectionRange) {
console.log(inputEl)
inputEl.setSelectionRange(cursorPos[0], cursorPos[0])
}
}, [value, cursorPos])
