React Input 限制仅支持中文、日常标点符号。不支持英文

使用组件 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])