react 实现简单的前端筛选

项目中经常遇到列表，如显示一群人或者一些商品的详情信息，需要在一个搜索框内输入内容，下面的列表就自动筛选出与输入内容相匹配的信息框。 实现过程如下： 1. 在input输入框中绑定onChange方法，监听输入框值的变化，当输入框的值发生变化时触发方法； 以下用到的UI框架为Blueprint，text初始值为空字符串

// An highlighted block
<InputGroup  
      placeholder="请输入搜索内容"
      value={
          
   this.state.text}
      onChange={
          
   this.filterInfo}
                                 />

2.写过滤方法： 最后可通过三目运算符控制div显示，此方法是将数据过滤，然后传给子组件，不同的场景下会需要添加一些操作，但总体思路如下

// An highlighted block
private filterData = (event:any) => {
          
   
    const text = event.target.value;
    this.setState({
          
   text});
    const resultDatas = this.state.resultData;  //需要搜索的原始数据，如ajax返回的JSON数据
    if(resultDatas.length<=0){
          
   
        return;
    }
    const peerHtml:any = [];
   
    resultDatas.forEach((item:any,key:number) => {
          
     
    // s为遍历数据后，将json数据连接成的一个字符串 ，a,b 分别为json数据的名称
                let s = ;
                s+=item.a?item.a+ :;
                s+=item.b?item.b+ :;
                
               if(s.indexOf(text)>=0){
          
   
               //使用indexOf判断s中是否包含text字符串，如果包含则将这条item数据push到新数组中
                 peerHtml.push(item)
                 this.setState({
          
   peerData:peerHtml})
                 //peerData为最终得到的数据，可传递给子组件
                }
          });
    if(peerHtml.length>0){
          
   
    // 这个setState根据个人上下文来设定
        this.setState({
          
   peerHtml:null});
       }else{
          
   
        this.setState({
          
   peerHtml: <div>没有查询到数据</div>});
      }
  }

以上便是一个简单的过滤搜索 功能