解决React中input输入框在中文输入法下的bug

解决React 中input 输入框在中文输入法下的bug

需求：封装Input 组件，输入拼音过程中不触发onChange，拼音输入结束后触发onChange
原理：input 标签上面有两个事件， 就像他的生命周期， compositionstart事件只有在输入中文时才会触发，触发事件在inpit 事件之前，compositionend表示结束中文输入时触发的事件， 不管输入最后是不是中文都会触发

组件

import React from 'react';
import { Input } from 'antd';

/**
 * @description: 封装带实时搜索的input,解决拼音输入法,不断搜索问题
 * @param {*} props 传入的属性
 * @return {*}
 */
const InputSearch = (props: any): React.ReactElement => {
  let inputOnchange: boolean | undefined;
  return (
    <Input
      {...props}
      onCompositionStart={() => {
        inputOnchange = true;
      }}
      onChange={(e) => {
        if (!inputOnchange) {
          props.onChange && props.onChange(e);
        }
      }}
      onCompositionEnd={(e) => {
        inputOnchange = undefined;
        props.onChange && props.onChange(e);
      }}
    />
  );
};

export default InputSearch;

调用
<InputSearch
    className="search"
    allowClear
    placeholder="搜索"
    prefix={<SearchOutlined style={{ color: '#C7C8CA' }} />}
    onChange={searchOnChange}
 />