搜索框过滤不返回搜索结果-React react-table filter答案

【问题标题】：Search box filtering does not return the searched result- React+ react-table+ filter搜索框过滤不返回搜索结果-React react-table filter
【发布时间】：2019-09-12 20:54:48
【问题描述】：

我使用 react-table 作为数据网格。我正在实现基于表的搜索过滤。过滤似乎不起作用，因此它返回空结果。我不知道哪里出错了。

有人可以帮忙吗？

我们将不胜感激

数据格式

let data =[  {id: 1, val1: "45GFSDSD", val2: "AKFHFDH83E3HHYE"},
             {id: 2, val1: "46FDGDGDGDG", val2: "AKFHFDH83E3HFGD"},
             {id: 3, val1: "56FDGGFGF", val2: "AERTFDH83E3HHYD"}
          ]

组件代码

import * as React from 'react';
import ReactTable from 'react-table';
class MyTable extends React.Component {

  constructor () {
      super();
      this.state = {
         data: data, // data from API, structure has been shown above
         search: ''
      }  
  }   

 render () {    
      let data = this.state.data
      if (this.state.search) 
      {
        data = data.filter((value) => {           
           return value.val1.includes(search)||value.val2.includes(search)|| String(value.id).includes(search)
         })
      }

      return (
       <div>
         Search: 
          <input value={this.state.search} onChange={e => this.setState({search: e.target.value})} />
          <ReactTable data={data} columns={columns} />//column object 
       </div>            
      )
 }
}

【问题讨论】：

你能创建一个codesandbox吗？调试起来会更容易。
我已经更新了下面的示例，使用ReactTable。
你也可以去掉构造函数，像state = {}这样使用你的状态，这比使用构造函数要好得多。

标签： reactjs typescript react-table

【解决方案1】：

您需要有两个数组，一个用于来自 api 的数据，一个用于过滤数据。你的状态会是这样的。

//on first load both arrays will have the same data
state = {
  data: [
    { id: 1, val1: "45GFSDSD", val2: "AKFHFDH83E3HHYE" },
    { id: 2, val1: "46FDGDGDGDG", val2: "AKFHFDH83E3HFGD" },
    { id: 3, val1: "56FDGGFGF", val2: "AERTFDH83E3HHYD" }
  ],
  filteredData: [
    { id: 1, val1: "45GFSDSD", val2: "AKFHFDH83E3HHYE" },
    { id: 2, val1: "46FDGDGDGDG", val2: "AKFHFDH83E3HFGD" },
    { id: 3, val1: "56FDGGFGF", val2: "AERTFDH83E3HHYD" }
  ]
};

然后你需要一个函数来过滤数据，当输入中的文本发生变化时

handleSearch = event => {
const search = event.target.value.toLowerCase();

this.setState({
  filteredData: this.state.data.filter(
    item =>
      (item.val1 && item.val1.toLowerCase().includes(search)) ||
      (item.val2 && item.val2.toLowerCase().includes(search))
   )
 });
};

您的意见

<input
  type="text"
  value={this.state.value}
  onChange={this.handleSearch}/>

表格从filteredData数组中获取数据

<ReactTable data={this.state.filteredData} columns={columns} />

working demo

【讨论】：

非常感谢！