如何解决React Table Filtering - 访问器返回值的问题
我使用的是 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 举报,一经查实,本站将立刻删除。