Question

我正在基于React构建轻量级的MS Excel。我目前正在建立一个过滤系统，该系统将允许基于过滤器输入过滤行-每列对应一个。如果只过滤一列，效果很好。

问题：如果我决定根据多于一列的内容进行过滤，则最新的过滤方法将具有优先权，而忽略所有以前的过滤条件，就像它们不在那儿一样。

我想我知道问题出在哪里。在当前形状下，我的脚本始终过滤存储在preSearch数组中的数据，该数组始终存储旧的原始数据（const）。我尝试对所有过滤器输入执行循环，但未能在Array.prototype.filter（）方法内使用 && 加入所有条件。

点击切换搜索按钮后，将生成：

showSearchInputs() {
    if (this.state.toggleSearch === true) {
      return (
        <tr onChange={(e) => this._searchData(e)}>
          {
            this.props.headers.map((a, b) => {
              return (
                <td key={b}><input data-idx={b} type="text" style={{fontSize: '11px', width: '150px'}} /></td>
              )
            })

          }
        </tr>
      )
    }
    else {
      return null
    }
  }

然后有一个侦听数据更改的方法：

  _searchData(e) {
    console.log(e.target.dataset.idx, e.target.value);
    if (!e.target.value.toLowerCase()) {
      //restore full old data
      this.setState({
        data: this.preSearch
      })
      return
    }
    else {
      var idx = e.target.dataset.idx 
      var searchdata = this.preSearch.filter(row => {
        return row[idx].toString().toLowerCase().indexOf(e.target.value.toLowerCase()) > -1
      })

      this.setState({
        data: searchdata,
      }) 
    }
  }

预期结果：过滤器重叠（累积），当前最新的过滤器优先从过滤器输入中删除字符也会更新结果，并瞄准要显示的0个过滤器和原始数据（如果用户自然删除了所有过滤器）

Answer 1

好的，所以我知道了。

我以前的方法是监视过滤器行内的更改，但仅考虑最后的更改。那就是问题所在。

我决定略微更改过滤方法。我添加了额外的状态属性，用于存储每个过滤器更改，默认情况下，我将它们设置为""，因为过滤器方法不适用于null或undefined：

this.state = {
    filters: ["", "", "", "", ""]
}

现在，每次用户在特定列中输入其过滤器时，this.state.filters都会更新。同时，在同一方法中，我也基于该过滤器过滤数据。如果所有字段均为空，我正在还原原始数据。

要获得多维，重叠过滤，我不得不在SO上寻求解决方案，因为我无法在return语句中组合多个布尔值。我在这篇文章中得到了答案：

How to return booleans joined with && inside callback function in filter method?

使用Array.prototype.every()检查所有项目是否符合回调条件，使用Array.prototype.includes()检查它们是否包含来自过滤器数组的元素，我设法做到了。请注意，Array.prototype.includes()是ES6功能。

复杂的数组过滤条件

1 个答案: