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这个状态更新的同步异步问题。
今天的分享就到这里~