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>});
      }
  }

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