Блог

Главная - Вопросы по программированию - Не работает фильтрация таблиц проектирования React Ant

Не работает фильтрация таблиц проектирования React Ant

#javascript #arrays #reactjs #filtering #antd

#javascript #массивы #reactjs #фильтрация #antd

Вопрос:

Я пытаюсь реализовать функциональность фильтрации таблиц проектирования ant в своем компоненте react, однако у меня возникла проблема с отображением фактических значений данных, которые я пытаюсь отфильтровать. Данные заполняются в массиве (this.state.data ), а в раскрывающемся списке отображается фактическая длина данных в массиве, но нет фактических видимых данных / значений имен, которые я пытаюсь отобразить. Любая помощь будет высоко оценена.

     const registeredUsersColumns = [
  {
    title: "Name",
    dataIndex: "Name",
    key: "1",
    filters: this.state.data,
    onFilter: (value, record) => record.Name.indexOf(value) === 0,
  }]

Комментарии:

1. как выглядит ваш массив данных?

2. @MohammadFaisal [{ FCR_EmailAddress: «testuser92@gmail.com » FCR_PhoneNumber: «17248597817» Id: 1 Имя: «Тестовый пользователь» OIC_Name: «jdshd5» OIC_StaffID: 123 PNC_Id: «hk562» }]

3. этот код не имеет смысла. можете ли вы это объяснить? record.Name.indexOf(значение) === 0,

4. @MohammadFaisal Это из документации по фильтрации таблиц ant designs. Запись представляет объект в индексе массива, и я считаю, что значение представляет dataIndex, на который я ориентируюсь «Имя». Вот изолированная среда для кода: codesandbox.io/s/yttnl

Ответ №1:

OnFilter должен возвращать это значение : record[indexOftheFiltringColumn]

Ответ №2:

Для получения желаемого изменения поведения .indexOf на .includes :

 onFilter: (value, record) => record.name.includes(value),

// and 

onFilter: (value, record) => record.address.includes(value),

Исправлена ссылка на CodeSanbox.