在前端开发中通过监听onInput事件触发输入框内容的更新是没有问题的，但是如果输入的内容是中文，就会出现像zhong'wen'nei另类内容，如'rong.这种内容一般影响不大，但是当需要对输入的内容进行一些耗时的操作时，就不得不考虑这种影响了，比如需要对内容进行复杂的渲染，实时发送通过网络等等场景。这个问题的解决方案需要浏览器提供的组合输入事件。简单来说，当输入包含“选词”链接的中文、日文、韩文等文本时，会额外触发compositionStart和compositionEnd两个事件，并对这两个事件进行监听和处理。等待不触发onInput事件的时间：来自MDN文档：compositionstart如果只需要处理组合输入，使用compositionEnd而不是onInput，但是用户偶尔需要输入英文和数字，这些输入不会触发compositionEnd。因此，我们需要在compositionStart时进入等待状态，等待状态中间的所有onInputs都不会被处理。输入英文和字母时，onInput正常处理。标记等待状态的方法有很多，比如useRef。import{useRef}from"react";exportfunctionChineseInput(params){const{onInput=()=>{}}=params;constlockRef=useRef(false);//进入组合输入状态consthandleStart=()=>{lockRef.current=true};consthandleInput=event=>{//组合输入状态，不处理if(lockRef.current)return;//非组合输入状态，触发onInputonInput(event);};//选词结束，触发onInputconsthandleEnd=event=>{lockRef.current=false;onInput（事件）；};return(
