背景：在react项目中使用ant.design的Input组件，onChange方法在输入拼音时会触发一次(e.target.value为空白符)，直到拼音输入完成会再次触发(e.target.value为输入值)。产品设计是实时搜索，所以严重依赖于onChange方法的值

思路：监听onCompositionStart与onCompositionEnd事件设置{lock}变量

「onCompositionStart, onCompositionEnd」

前言：MDN写道input元素有关于输入法的三个事件

正文：follow e.target.value发现：start值为空(相对于input存留值)；

change在windows + chrome + sogou pinyin的组合下为一个空白符{" "}且不会多次触发；change在mac + chrome + sogou pinyin的组合下触发多次并带有单引号{"'"}；

end值为拼音输入值

基于上述发现可以引入一个{lock}变量。当start时将{lock}设为true；

当end时将{lock}设为false并改变input值再提交value(这里提交value是因为对进行了一层封装，也即触发自定义的onChange事改变input值是因为将设为了受控组件，原因是需要对外提供clear方法以及满足可能会被动设置value需求);

当change时若{lock}为true则仅改变value并不提交(mac下若不允许改变input值则输入法消失，若为false则正常改变value并提交value

话不多说，上代码：

import React, {