前端本地实现搜索排序

排序实现：
首先有一个排序选择框（按某个属性进行排序），排序的触发方法：

 Sort = value => {
    console.log(value);
    var sortObj = this.state.defaultData.sort(this.compare(value));
    this.setState({ tabledata: sortObj });
  };

compare = property => {
    return function(objF, objS) {
      var valueF = objF[property];
      var valueS = objS[property];
      return valueS - valueF; // 升序
    };
  };
this.state.defaultData // 需要排序的全部数据
this.state.tabledata// 排序后展示的数据

搜索实现：
首先有一个搜索框，输入点击触发搜索：

IPSearch = value => {
    console.log(value);
    if (value.length > 0) {
      var arr = [];
      this.state.defaultData.map(item => {
        if (item.Ip.split(value).length > 1) {
          arr.push(item);
        }
      });
      this.setState({ tabledata: arr });
    } else {
      this.setState({ tabledata: this.state.defaultData });
    }
  };
this.state.defaultData // 需要搜索的全部数据
this.state.tabledata// 搜索后展示的数据
//无输入时显示全部数据

根据数据类型筛选出需要显示的数据：
首先我们需要拿出数据的数据类型：

selectData = () => {
    const env = [];
    const idc = [];
    this.state.tabledata.map(item => {
      env.push(item.Env);
      idc.push(item.Idc);
    });
    var envset = Array.from(new Set(env));
    var idcset = Array.from(new Set(idc));
    this.setState({ idcList: idcset, envList: envset });
  };
//利用Set方法去重

筛选：

 Idc = value => {
    var arr = [];
    this.state.defaultData.map(item => {
      if (item.Idc === value) {
        arr.push(item);
      }
    });
    this.setState({ tabledata: arr });
  };

  Env = value => {
    var arr = [];
    this.state.defaultData.map(item => {
      if (item.Env === value) {
        arr.push(item);
      }
    });
    this.setState({ tabledata: arr });
  };