В этой статье блога мы рассмотрим различные методы фильтрации результатов в компоненте ReferenceInput в React-admin. ReferenceInput — это мощный компонент, используемый для выбора связанного ресурса, например внешнего ключа, в приложениях реагирования-администрирования. Применяя фильтры, мы можем уточнить параметры, доступные для выбора, обеспечивая более эффективный и интуитивно понятный пользовательский интерфейс.

Метод 1: использование атрибута filter
Самый простой способ фильтровать результаты ReferenceInput — указать атрибут фильтра непосредственно в компоненте ReferenceInput. Атрибут фильтра принимает объект, содержащий пары ключ-значение, определяющие критерии фильтра. Вот пример:

<ReferenceInput source="categoryId" reference="categories" filter={{ active: true }}>
    <SelectInput optionText="name" />
</ReferenceInput>

Метод 2: динамическая фильтрация с помощью функции filterToQuery
react-admin предоставляет другой метод динамической фильтрации с использованием функции filterToQuery. Эта функция позволяет нам определять пользовательские фильтры на основе текущих значений формы. Вот пример того, как его использовать:

import { useForm } from 'react-final-form';
import { filterToQuery } from 'react-admin';
const MyReferenceInput = (props) => {
    const form = useForm();
    const handleFilter = (values) => {
        const filters = filterToQuery(values, props);
        // Apply filters to the data provider
    };
    return (
        <ReferenceInput source="categoryId" reference="categories" filter={handleFilter}>
            <SelectInput optionText="name" />
        </ReferenceInput>
    );
};

Метод 3: использование параметров запроса perPageи filter.
Другой подход — использовать perPageи filterпараметры запроса, предоставленные поставщиком данных. Изменяя URL-адрес, мы можем передать нужные критерии фильтра. Вот пример:

import { useListContext } from 'react-admin';
const MyReferenceInput = () => {
    const { filterValues } = useListContext();
    return (
        <ReferenceInput
            source="categoryId"
            reference="categories"
            filter={{ ...filterValues, active: true }}
        >
            <SelectInput optionText="name" />
        </ReferenceInput>
    );
};

Метод 4. Настройка поставщика данных
Для более сложных сценариев вы можете настроить поставщика данных для реализации сложной логики фильтрации. Расширив поставщик данных по умолчанию, вы можете переопределить метод getListдля применения пользовательских фильтров. Вот упрощенный пример:

import { useDataProvider } from 'react-admin';
const MyReferenceInput = () => {
    const dataProvider = useDataProvider();
    const handleFilter = async (filterValues) => {
        const response = await dataProvider.getList('categories', {
            filter: { ...filterValues, active: true },
        });
        // Process the response data
    };
    return (
        <ReferenceInput source="categoryId" reference="categories" filter={handleFilter}>
            <SelectInput optionText="name" />
        </ReferenceInput>
    );
};

В этой статье мы рассмотрели несколько методов фильтрации результатов ReferenceInput в React-admin. Независимо от того, предпочитаете ли вы простые встроенные фильтры или более продвинутую настройку через поставщика данных, React-admin обеспечивает гибкость для удовлетворения ваших потребностей в фильтрации. Внедряя эти методы, вы можете улучшить взаимодействие с пользователем и повысить эффективность ваших приложений реагирования на администрирование.