React 受控组件中输入法组合事件的处理陷阱与修复
在中文、日文、韩文等输入法环境下,React 的受控输入组件经常出现一个隐蔽却影响体验的问题:用户正在拼音输入时,输入框的内容会被意外重置或光标跳到末尾。比如一个搜索框,用户输入“nihao”想选“你好”,但每次按键都触发 onChange 并强制设置 value,导致候选词还没选完,输入框就变成了半成品拼音。这个问题的根源在于 React 的合成事件与浏览器原生 composition 事件(compositionstart、compositionupdate、compositionend)的执行顺序,以及受控 value 回写时机不当。不少团队直接改用非受控组件绕过,但那样又失去了实时校验...