在 input 框 change 的时候需要做防抖处理,不然会取不到 value 的值
项目中如果自带debounce就可以直接用,如果没有安装一下lodash的debounce插件,
具体可以查一下官网,以下代码是项目里有插件的相关语法
import { debounce } from 'lodash'
class AppPopover extends PureComponent {
constructor() {
super()
this.doSearchAjax = debounce(this.doSearchAjax, 500)
}
// 搜索
onSearchChange = e => {
this.doSearchAjax(e.target.value)
}
doSearchAjax = value => {
const { dispatch, applicationList } = this.props;
if (value) {
const list = []
applicationList.forEach(item => {
if (item.component.name.indexOf(value) > 0) {
list.push(item)
}
})
this.setState({
appList: list,
});
} else {
dispatch({
type: 'canvas/fetchApplication',
cb: (res) => {
this.setState({
appList: res,
});
},
});
}
}
}
placeholder="搜索应用"
onChange={this.onSearchChange}
allowClear
prefix={}
/>
doSearchAjax 为项目中的调接口逻辑 onSearchChange为搜索框绑定事件
该功能是搜索框输入内容,筛选出下拉菜单的相关内容