开门见山
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); //重新计数
}