如何不使用react-admin更改列表过滤中的url? [英] How to not change the url on list filtering with react-admin?

问题描述

假设我有一条路线/客户，其中客户的列表 正在呈现.在同一条路线上，还有一个侧抽屉.该抽屉包含一个列表，该列表带有帮助主题的过滤器 .

Assume I have a route /customers where a List of customers is being rendered. On that same route there's also a side drawer present. That drawer contains a List with a Filter of help topics.

当我开始在侧面抽屉中输入过滤器"时，URL会更改.这取决于react-admin的列表过滤器的工作方式.

When I start typing in the Filter in the side drawer, the url changes. That's according to how react-admin's list filter is working.

问题在于客户列表注意到路线更改.实际上，它会基于与帮助主题相关的搜索字词开始查询和重新加载客户.当然没有找到客户.

The problem is that the customers list is noticing the route changes. In effect it starts querying and reloading customers based on a search term that is related to help topics. No customers found of course.

我希望客户列表不会注意到我正在过滤帮助主题.我想要的解决方案是，在输入帮助主题搜索词时，侧边抽屉中的列表过滤器不会更改网址.

I want the customer list to not notice I'm filtering on help topics. The solution I'm aiming for is that the list filter in the side drawer will not change the url while I input a help topic search term.

如何在侧面抽屉中配置或自定义过滤器，以使其在键入时不更改url，而是将当前过滤器值存储在类似组件状态的位置?

How can I configure or customise the filter in the side drawer to not change the url while typing, but store the current filter value in something like component state instead?

实际上，由于过滤器以某种形式存在(通过react-final-form)，并保持其自己的状态，因此我可以使用这样的解决方案.但是publishToUrl当然不是Filter可用的道具.

Actually, since the filter lives in a form (by react-final-form), which keeps its own state, I could live with a solution like this. But of course publishToUrl isn't an available prop for Filter.

const MyFilter = props => (
    <Filter {...props} publishToUrl={false} >
        <TextInput source="title" />
    </Filter>
);

相关:

• https://github.com/marmelab/react-admin/issues/2519
• https://github.com/marmelab/react-admin/issues/3521

• https://github.com/marmelab/react-admin/issues/2519
• https://github.com/marmelab/react-admin/issues/3521

推荐答案

由于d0berm4n提供了指导，因此我能够编译一个有效的解决方案(适用于react-admin 3.x).就其创建的查询(只是过滤器)而言，它是相当有限的，但这只是我所需要的.

Thanks to the directions provided by d0berm4n, I was able to compile a working solution (for react-admin 3.x). It's pretty limited in terms of the query that it creates (just filter), but it's just wat I need.

import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { useDispatch } from 'react-redux';
import lodashDebounce from 'lodash/debounce';
import { Filter, TextInput, changeListParams } from 'react-admin';

const MyFilter = ({ resource, ...rest }) => {
    const dispatch = useDispatch();

    const debouncedSetFilters = lodashDebounce((filter = {}) => {
        const query = { filter };

        dispatch(changeListParams(resource, query));
    }, 500);

    const setFilters = useCallback(debouncedSetFilters, []);

    return (
        <Filter resource={resource} {...rest} setFilters={setFilters}>
            <TextInput source="title" alwaysOn resettable />
        </Filter>
    );
};
MyFilter.propTypes = {
    resource: PropTypes.string,
};
MyFilter.displayName = 'MyFilter';

export default MyFilter;

更新:此解决方案不完整.现在，同一页面上的其他过滤器也开始在MyFilter所在的列表中进行查询.我怀疑这是我可以隔离的问题.以后再说吧……

这篇关于如何不使用react-admin更改列表过滤中的url?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！