input框监听输入法输入中文
需求input事件select为什么不能使用注意select的onChange和onSearch需求
想要在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) => { }})<ProFormSelectname="buyerIds" label="关联公司" showSearchfieldProps={{mode: 'multiple', // 设置 Select 的模式onSearch:(params)=>{getbuyerList.run({ searchText:params })},notFoundContent:buyerListSearch ? <Spin size="small" /> : null // 当下拉列表为空时显示的内容,添加了antd的Spin}}options={buyerListSearch} //options集合返回下拉列表中所有元素的集合/>