input框监听输入法输入中文

需求

想要在input框中进行接口实时查询，但是在使用输入法输入的时候会有这种情况，即使添加防抖还会出现这种情况；这样我们就会用到compositionstart和compositionend

input事件

• compositionstart 当用户使用拼音输入法开始输入汉字时，这个事件就会被触发。
• compositionend 当文本段落的组成完成或取消时，这个事件将被触发

const onChange = (e）=>{
	if（e.type==='compositionstart'）{
	return  // 如果刚监听输入 就直接return出去
	}
	if (e.type === 'compositionend') {
      // 执行你的方法
    }
}

select为什么不能使用

那么问题又来了，为什么在select搜索中不能使用，没有效果呢？那是因为selec没有这两个事件，所以只能添加防抖了
开发中用到的是ant design pro组件库和umi框架

import { useRequest } from 'umi';
const getbuyerList = useRequest(queryGetBuyerList, {
    manual: true,
    debounceInterval: 800,  // 防抖在这里
    onSuccess: (val) => { }
})
<ProFormSelect
	name="buyerIds" label="关联公司" showSearch
    fieldProps={{
      mode: 'multiple',  // 设置 Select 的模式
      onSearch:(params)=>{getbuyerList.run({ searchText:params })},
      notFoundContent:buyerListSearch ? <Spin size="small" /> : null  // 当下拉列表为空时显示的内容，添加了antd的Spin
     }}
    options={buyerListSearch}  //options集合返回下拉列表中所有元素的集合
 />

注意select的onChange和onSearch

• onchanage(e) 返回的是options发生改变的值
• onSearch(e) 返回的是你当前输入要查询的值