react Input 中文输入法字还没出来就调用e.target.value怎么办

在React中处理中文输入时，通常我们会遇到一个问题：在中文输入法状态下，用户开始输入中文之前，e.target.value 可能还没有更新，因为浏览器还没有接收到完整的字符序列。这种情况下，如果过早地读取 e.target.value，可能会导致获取到一个不完整或者错误的值。

使用onCompositionEnd事件。这个事件在用户完成一个字符的输入（无论是否为中文）后触发。

注意：测试 onChange和onCompositionEnd 要一起使用，不然不好使，不知道为什么。

复制代码

  const [value, setValue] = useState('')
  const handleChange = (e: any) => {
    let val = e.target.value
    const len = val.length
    if (len >= 10) {
      const message = val.substring(0, 8)
      console.log(message)
      val = val.substring(8)
    }
   setValue(val);
  };
  
  const handleCompositionEnd = (e: any) => {
    let val = e.target.value
    const len = val.length
    if (len >= 8) {
      const message = val.substring(0, 6)
      console.log(message)
      val = val.substring(6)
    }
   setValue(val);
  };



<input
  type="text"
  value={value}
  onChange={handleChange}
  onCompositionEnd={handleCompositionEnd}
/>