我正在尝试在我的 React 表中实现日期范围过滤器。当我更改开始或结束日期时,它会触发过滤器功能,创建最小和最大日期,但是当它完成时,不会过滤任何日期并且输入从所选日期开始为空。这是我的代码:
const ChartData = () => {
const columns = React.useMemo(
() => [
{
Header: "Date",
columns: [
{
Header: "Date",
accessor: "date",
id: "date",
Filter: chartFilter.DateRangeColumnFilter,
filter: "between"
}
]
}
],
[]
);
const data = React.useMemo(() => dummyData(100000), []);
return (
<div className={classes.tableWrapper}>
<Table columns={columns} data={data} />
</div>
);
};
export default ChartData;
过滤页面:
export function DateRangeColumnFilter({
column: { filterValue = [], preFilteredRows, setFilter, id }
}) {
const [min, max] = React.useMemo(() => {
let min = preFilteredRows.length ? new Date(preFilteredRows[0].values[id]).getTime() : 0;
let max = preFilteredRows.length ? new Date(preFilteredRows[0].values[id]).getTime() : 0;
preFilteredRows.forEach((row) => {
min = Math.min(new Date(row.values[id]).getTime(), min);
max = Math.max(new Date(row.values[id]).getTime(), max);
});
return [min, max];
}, [id, preFilteredRows]);
return (
<div style={{display: "flex"}}>
<input
value={filterValue[0] || ""}
type="date"
onChange={(e) => {
const val = e.target.value;
setFilter((old = []) => [val || undefined, old[1]]);
}}
style={{
width: "70px",
marginRight: "0.5rem"
}}
/>
to
<input
value={filterValue[1] || ""}
type="date"
onChange={(e) => {
const val = e.target.value;
setFilter((old = []) => [old[0], val || undefined]);
}}
style={{
width: "70px",
marginLeft: "0.5rem"
}}
/>
</div>
);
}
我在这里缺少什么?