开门见山

Input标签中自带了两个针对中文拼音的监听事件
onCompositionStart & onCompositionEnd
监听的时机就如字面意思，拼音输入开始时&结束时

应用场景

统计或者限制Input输入框中的字符个数时，屏幕上打出的拼音也会被统计进去。

解决方案

创建三个监听器，分别是onChange, onCompositionStart & onCompositionEnd。
创建一个全局变量（pyFlag = false），用来判断拼音是否正在输入。拼音start，就把flag置为true，并把计数的值暂停在当前值；拼音end，就把flag置为false，并重新统计当前event.target.value的长度。

输入框标签

<input onCompositionStart={onStart} onChange={onChanged} onCompositionEnd={onEnd} />

onChange用来监听第一段不是拼音的字符

（此处可以理解为do...while...循环中的do）

const onChanged = (e) => {
  if (pyFlag==false) {
      console.log(e.target.value);
      setCount(e.target.value.length); 
  }
}

onCompositionStart

const onStart = () => {
  setFlag(true);
  if (pyFlag) {setCount(count => count)} //关闭计数
}

onCompositionEnd

const onEnd = (e) => {
  setFlag(false);
  setCount(e.target.value.length);  //重新计数
}