今天接到一个需求,说是要把一个input框的搜索即时匹配,效果图如下:
随着输入框的不断输入,会不断向后台发送请求,并将输入框内的value作为请求的参数,后台会根据参数返回与value最为匹配的数据,今天不讲原理,只跟大家分享最快的解决方法(此方法是基于antd的ui框架)
1,第一步要安装antd
npm install antd --save
2,要用到Autocomplete,Input,message.三个组件
具体代码:
const AutoCompleteOption=AutoComplete.Option
const [nameList,setNameList]=useState([])
const nameSearchList=(value)=>{
xxx({
name:value//xxx代表你封装的请求方法
}).then((res)=>{
if(res.stat === 'ok'){
setNameList(res.data)
}else{
message.error(res.msg)
}
}).catch(err=>{
//之所以要加catch是因为输入不符合规范的名称时;就会报错
//而且页面直接崩溃,所以要catch一下,我封装的是fetch方法,
//我之前看过一篇文章,好像说fetch是不能自动catch错误的&