React Table Filtering - 访问器返回值的问题

编程问答 2022-04-30

问题描述

我使用的是 React Table 7.6.x。

我已经为我的 React 表创建了列过滤器。

如果我尝试过滤在访问器中使用 return 语句返回链接组件的列，则过滤器不起作用。奇怪的是 - 如果我在访问器中使用格式化函数，过滤器会按预期工作：

accessor: (d) => {
      return d.incidentStartDate ? formatDateMDY(d.incidentStartDate) : "";
    },

但是这样做：

 accessor: (d) => {
      return <Link to={{ pathname: `/enforcements/watersystems/${d.systemId}` }}>UTAH{d.altId}</Link>;
    }

破坏过滤器。

有没有办法在过滤器创建中解决这个问题，或者我应该以不同的方式编写列？

过滤器不起作用 - 使用返回的列属性

 {
    Header: "Incident #",id: "incidentNumber",accessor: (d) => {
      return (
        <Link
          to={{
            pathname: `/enforcements/watersystem/${d.systemId}/${d.incidentNumber}`,state: { incident: d }
          }}
        >
          {d.incidentNumber}
        </Link>
      );
    },width: 90
  },

如果我改变方向，过滤器工作：

 {
    Header: "Incident #",accessor: "incidentNumber",

列过滤器代码

const DefaultColumnFilter = ({ column: { filterValue,preFilteredRows,setFilter } }) => {
  return (
    <InputGroup size="sm" className="mb-3 mt-3">
      <FormControl
        aria-label="Small"
        aria-describedby="inputGroup-sizing-sm"
        value={filterValue || ""}
        onChange={(e) => {
          setFilter(e.target.value || undefined);
        }}
        placeholder={"Search ..."}
      />
    </InputGroup>
  );
};

默认列声明

 const defaultColumn = React.useMemo(
    () => ({
      Filter: DefaultColumnFilter,defaultFilters: true,minWidth: 30,width: 150,maxWidth: 500
    }),[]
  );

更新：如果我将列更改为使用 Cell 而不是 accessor，过滤器框就会消失。

  {
    Header: "Incident #",//accessor: "incidentNumber",Cell: ({ row }) => {
      return (
        <Link
          to={{
            pathname: `/enforcements/watersystem/${row.original.systemId}/${row.original.incidentNumber}`,state: { incident: row.original }
          }}
        >
          {row.original.incidentNumber}
        </Link>
      );
    },

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-table-v7reactjsreactjsreactjsreactjs