antd input 搜索忽略中文输入法中间输入过程,或者说识别中文输入法


antd input 搜索忽略中文输入法中间输入过程,或者说识别中文输入法

起因,在使用 antd的 AutoComplete 扩展时,发现自动补全会将输入法中间输入的过程也触发,然后找解决方法,找到了 composition 相关触发事件,想着用到 AutoComplete组件,发现并没有相关接口,遂去使用Input组件,结果也出了bug

input 中 onCompositionEnd事件触发bug

在使用 onCompositionStart onCompositionEnd 两个事件来判断输入法是否完成,结果 onCompositionStart一直触发,onCompositionEnd则一直不触发

找了一圈也没有为什么,想了下,这么明显的坑,看来不好解决,可能时react内部问题,所以就换别的思路。

通过onChange nativeEvent.isComposing 和 nativeEvent.data判断来解决

isComposing 可以判断当前输入是通过输入法输入模式

如此的话,就只剩下判断输入法是否完成与否。根据我的业务逻辑,只要输入中没有英文就完成,情况大概如下例子


onChange={(event) => {
    const nativeEvent = event.nativeEvent
    const value = event.target.value
    if (nativeEvent['isComposing']) {
      // 判断是否存在英文,存在则判定为输入法 //data
      if (!/[a-zA-Z]/.test(nativeEvent['data'] || '')) {
        //触发搜索
        props.onSearch(value)
      }
    } else {
      // 触发搜索
      props.onSearch(value)
    }
    // 如果动态设置了value的话 写回value
    setValue(value)
  }}