Компонент Ant Design Table для обратного вызова onChange не запущен

Question

Компонент Table от Ant Design имеет пропеллер onChange, который запускается при любой пагинации, фильтрации или сортировке. В моем случае речь идет о фильтрации. При использовании фильтрующих элементов по умолчанию из заголовка таблицы вызывается обратный вызов. Но я использую пользовательские элементы фильтра вне компонента Table, которые устанавливают локальное состояние, и это состояние используется для пропуска filteredValue в столбце. Сама фильтрация работает безупречно. Но обратный вызов onChange не срабатывает. Я заинтересован в атрибутах onChange, так как они содержат реквизиты currentDataSource, которые представляют фактический визуализированный объект источника данных. Я не могу найти другие обратные вызовы для Table, которые запускаются при рендеринге компонента.

Есть ли у кого-нибудь идеи о другом способе получения визуализированного объекта dataSource при включенных фильтрах? Конечно, я мог бы начать вычисления для исходного объекта dataSouruce, потому что я знаю о фильтрах, но поскольку Table предоставляет информацию в общем, я хотел бы предотвратить избыточность.

Обновление:

См. Базовый пример здесь: https://codesandbox.io/s/react-antd-styled-template-73yxh Всякий раз, когда вы используете элементы фильтра в заголовке таблицы, вы видите событие console.log (через свойство onChange таблицы). Когда вы нажмете кнопку внизу, вы увидите, что фильтр изменился, но событие console.log не произошло.

Answer 1

Описанное поведение предназначено. Table ведет себя как управляемое input поле, которое также не вызывает onChange при изменении внешнего состояния.

В моем случае меня интересует объект currentDataSource, чтобыПосмотрите, сколько предметов содержит таблица. Что отличается от dataSource, когда фильтры активны.

Вы можете получить это значение из другого места. Table Pagination имеет обратный вызов showTotal с подписью Function(total, range). Установите этот обратный вызов, и вы получите фактическое общее количество элементов при отображении нумерации страниц.

<Table
  dataSource={someData}
  columns={someColumns}
  pagination={{
    showTotal: (total, range) => {
      console.log({ total, range });
    }
  }}
/>