React中的模糊搜索
最近在高React项目,然后需要做一个模糊搜索,vue写太多了,老是要v-model,给我急得,欸,那就写一遍博客来记录一下这个简单的问题。个人感觉,react还是很看重对JavaScript的熟练程度的,所以我~~闲得慌的我~~ 使用原生的js来写这个模糊搜索。
首先就是先确定状态,来存储数据:
constructor()
{
super()
this.state={
cinemalist:[], //这个用于渲染dom数据
alllist:[] //做一个数据备份,是我用来解决数组内容缺失的手段
}
}
然后简单渲染下数据,同时设置一个输入框:
render() {
return (
<div>
<input onInput={
this.getinput.bind(this)}></input> //需要使用bind来使得this指向当前的组件,防止后续函数内的this出现误解
<ul>
{
this.state.cinemalist.map(item=><li key={
item.cinemaId}>{
item.name}--{
item.address}</li>)}
</ul>
</div>
)
}
这里顺便附上输入框的css代码:
input{
width: 90%;
height: 30px;
margin-left: 3%;
outline: none;
font-size: 18px;
color: gray;
background-color:aliceblue;
border: none;
margin-top: 10px;
border-radius: 15px;
padding-left: 15px;
}
那么剩下就是逻辑了,这里我在input中绑定一个input事件,一旦输入触发对应的函数,同时,利用自带的event事件获取需要的参数,也就是event.target.value来获取输入的值,然后使用filter函数过滤出包括搜索关键字的相关词条,然后setstate改变对应的状态。但是我们应该考虑一点,那就是,由于每次过滤后,数组的内容都会减少,会导致用户后续的搜索内容对应不上,也就是数组内容缺失,很明显是错误的。我的解决方法是,开辟一个数组来存储获取得到的全部数据,开辟另外一个数组用来专门渲染dom,同时,每次搜索的时候,都是使用包含全部数据的数组进行过滤,然后更新渲染dom的那个数组,代码献上:
getinput(e)
{
var oldlist=this.state.alllist
oldlist=oldlist.filter(item=>item.name.includes(e.target.value))
this.setState({
cinemalist:oldlist
})
}
需要注意的是,我这里的代码在过滤的时候没有考虑英文字母的大小写,如果你包含的内容需要特别注意大小写,那还得加工一下里面的filter过滤条件。
还有一点强调,由于setstate的异步与同步的条件是不一样的,如果你需要在确保已经状态更新之后再做一些动作,那么需要将setstate放在异步环境中,我给大家推荐的方法是放一个定时器,后续写一篇博客来讲述react这个状态更新的同步异步问题。
今天的分享就到这里~