Question

我正在使用ReactTable，并以具有实际链接的HTML格式显示来自数组（网站网址的数组）的数据。

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

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

displayCellData 是我的函数，用于将URL数组转换为带有格式化标签的HTML字符串。 row.value 包含一组网址，例如 ['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

Answer 2

https://codesandbox.io/s/reverent-banach-9l31m

您可以覆盖defaultFilterMethod以自定义过滤器行为。

<div className="App">
  <ReactTable
    data={data}
    columns={columns}
    filterable
    defaultFilterMethod={(filter, row) => { return row[filter.id].indexOf( filter.value ) > -1; }}
  />
</div>

当您现在键入http://google.com时，它将基于完全匹配过滤除第一行以外的所有内容。如果需要其他过滤器逻辑，请随时编辑defaultFilterMethod。目前，它正在使用完全匹配。只需确保返回一个boolean值即可。

Answer 3

在您各自的列上添加自定义过滤器方法，如下所示：

filterMethod: (filter, row) => {
   if (row.url.findIndex(element => element.includes(filter.value)) > -1) {
      return true;
   }
   return false;
}

Answer 4

您可以通过defaultFilterMethod函数在includes道具中使用find方法：

import React from "react";
import ReactDOM from "react-dom";
import "react-table/react-table.css";
import ReactTable from "react-table";

import "./styles.css";

function App() {
  const data = [
    {
      url: ["http://google.com", "http://yahoo.com/", "http://ggg.com"]
    },
    {
      url: ["http://xgoogle.com", "http://zyahoo.com/", "http://xggg.com"]
    }
  ];
  const columns = [
    {
      Header: "URL",
      accessor: "url",
      Cell: row =>
        row.row.url.map((url, key) => (
          <div>
            <a href={url} key={key} target="_blank" rel="noopener noreferrer">
              {url}
            </a>
          </div>
        ))
    }
  ];
  return (
    <div className="App">
      <ReactTable
        data={data}
        columns={columns}
        filterable
        defaultFilterMethod={(filter, row) => {

            return row[filter.id].find(el => el.includes(filter.value));
          }
        }
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

ReactTable（ReactJS）-具有HTML内容的行中的搜索过滤不起作用

4 个答案: