javascript - 如何过滤掉反应表中日期范围之间的日期

Question

如何根据日期范围过滤表格数据？

在此处将过滤器设置为日期列：

const tableInstance = useRef(null);
  const filterTable = (dates) => {
    if (tableInstance.current) {
      tableInstance.current.setFilter('session_date', dates);
    }
  };

onClick 功能在这里：

const handleFilter = () => {
    setSessionsData(data);
    if (sessionsData) {
      const dateArray = getDates(
        moment(fromDate).format('L'),
        moment(toDate).format('L')
      );
      filterTable(dateArray);
    }
  };

score 2 · Accepted Answer

将此过滤器添加到您各自的列对象

{
  id: 'your_column_id',
  accessor: 'your_accessor',
  filter: (rows, id, filterValue) => {
    return rows.filter(
      (row) =>
        filterValue.length <= 0 ||
        !filterValue ||
        filterValue.includes(row.values[id])
    );
  }
}

在这里，filterValue 包含包含所有可能匹配项的数组，即在您的情况下，dateArray（从“fromDate”到“toDate”的所有日期）。

score 0 · Accepted Answer

如果希望你对钩子的反应概念很好，或者如果你需要帮助，请点击以下链接

现在对于您的问题，您必须采取的方法。您已将过滤器放在两个状态值上，即您的 date_range。

您可以在过滤器单击时传递一个事件以更新 date_range 的状态，您将在其中添加挂钩以在表中设置值，如下所示，

const [list, setList] = useState([]);

  useEffect(() => {
     fetch('http://localhost:3333/list')
   .then(data => {
       setList(data.json);
    })
   })
 }, [])

另外，要记住的另一件事是不要在任何状态更改时盲目调用 API，即，是否有任何值与状态中的原始值真正发生了变化，您必须了解纯组件的概念，以防止组件盲目调用API，下面是在反应中使用纯组件的链接，

javascript - 如何过滤掉反应表中日期范围之间的日期

2 回答 2

Related

Reference