0

我正在使用 React Table 7.6.x。

我为我的 React Table 创建了列过滤器。

如果我尝试过滤在访问器中使用 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 #",
    id: "incidentNumber",
    accessor: "incidentNumber",
    width: 90
  },

列过滤器代码

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 #",
    id: "incidentNumber",
    //accessor: "incidentNumber",
    Cell: ({ row }) => {
      return (
        <Link
          to={{
            pathname: `/enforcements/watersystem/${row.original.systemId}/${row.original.incidentNumber}`,
            state: { incident: row.original }
          }}
        >
          {row.original.incidentNumber}
        </Link>
      );
    },
4

1 回答 1

0

Cell通过使用ROW 元素和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>
  );
},
于 2022-01-04T06:26:59.843 回答