ReactTable (ReactJS) - 包含 HTML 内容的行中的搜索过滤不起作用

Question

我正在使用ReactTable并将数组（站点 url 数组）中的数据显示为带有真实链接的 HTML。

不幸的是，当我在单元格中使用 HTML 时，此列中的搜索过滤不起作用。这是我在本专栏中的代码：

{
Header: 'URL',
accessor: 'url',
Cell: row => <div>{this.displayCellData(row.value, 'url')}</div>
}

displayCellData是我的函数，它将 url 数组转换为带有格式化标签的 HTML 字符串。row.value包含 url 数组，例如[' http://google.com ', ' http://yahoo.com/ ', ...]

我如何更改此代码以使该列的过滤工作正常？我尝试了这样的代码来将访问器中的数组转换为字符串以使其可搜索，但它不起作用：

{
id: 'url',
Header: 'URL',
accessor: row => row.url.toString(),
Cell: row => <div>{this.displayCellData(row.value, 'url')}</div>
}

添加了用于测试的沙箱：

https://codesandbox.io/s/flamboyant-mountain-ezxmy（尝试在专栏中搜索）

Answer 1

您可以defaultFilterMethod按照@arnonuem 提到的进行更改。但我建议使用filterMethod列级别来实现它

  const columns = [
    {
      Header: "URL",
      accessor: "url",
      Cell: row => <div>{displayCellData(row.value)}</div>,
      filterMethod: (filter, row) => {
        return row.url.indexOf(filter.value) >=0;
      }
    }
  ];

如果您想在数组中包含内容进行搜索，可以使用如下所示的内容

  const columns = [
    {
      Header: "URL",
      accessor: "url",
      Cell: row => <div>{displayCellData(row.value)}</div>,
      filterMethod: (filter, row) => {
        return row.url.findIndex(item => item.indexOf(filter.value) >= 0) >= 0;
      }
    }
  ];

更新后的沙箱如下

https://codesandbox.io/s/interesting-rubin-thdwn