当第一个日期过滤器被清除时，反应ag-grid日期过滤器清除第二个日期过滤器

Question

我已经使用 React js 通过 AG-Grid 实现了服务器端分页。

现在我在网格上的日期过滤器上遇到问题。我的过滤器上有“AND”“OR”条件。默认情况下仅显示一个日期（这很好）。但是，一旦您选择了日期，第二个日期选择器将显示“AND”“OR”条件。

当您单击第一个日期选择器并选择“清除”时，问题就出现了，第二个日期从屏幕上消失，并且日期过滤器未应用于网格。但是，当您再次添加第一个过滤器时，消失的第二个过滤器会随着您放回其中的旧过滤器一起回来。

您可以从官方文档中看到日期过滤器选择器正常工作的示例（通过选择三行来应用日期过滤器）https://codesandbox.io/s/f86lk4?file=/src/index.js

如果清除第一个日期，则不会清除第二个日期。

我的过滤器参数定义如下：

var filterParams = {
  comparator: (filterLocalDateAtMidnight, cellValue) => {
    var dateAsString = cellValue;
    if (dateAsString == null) return -1;
    var dateParts = dateAsString.split('/');
    var cellDate = new Date(
      Number(dateParts[2]),
      Number(dateParts[1]) - 1,
      Number(dateParts[0])
    );
    if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
      return 0;
    }
    if (cellDate < filterLocalDateAtMidnight) {
      return -1;
    }
    if (cellDate > filterLocalDateAtMidnight) {
      return 1;
    }
    return 0;
  },
};

我的日期列定义如下：

  const [columnDefs, setColumnDefs] = useState([
    {
      field: 'date',
      filter: 'agDateColumnFilter',
      filterParams: filterParams,
    },
  ]);

我的默认列定义是这样定义的：

  const defaultColDef = useMemo(() => {
    return {
      sortable: true,
      filter: true,
      wrapText: true,
      ensureDomOrder: true,
      enableCellTextSelection: true
    };
  }, []);

代码看起来与 ag-grid 给出的示例非常相似，但我不知道为什么它的工作方式不同。

有人有什么想法吗？

Answer 1

我找到了解决方案，我只需要把我的ag grid版本升级到31.0.3版本