react-admin - 阻止列表的过滤器提交“onChange”答案

【问题标题】：react-admin - Stop List's Filters from submitting "onChange"react-admin - 阻止列表的过滤器提交“onChange”
【发布时间】：2019-03-02 22:15:34
【问题描述】：

有没有办法让列表的过滤器不会在每个字段的更改时自动提交？我正在尝试实现报告资源，最好让用户设置他们想要的过滤器，然后提交表单以生成报告，因为它们往往对数据库很重。

谢谢！

【问题讨论】：

标签： react-admin

【解决方案1】：

React-admin 的 <Filter> 组件不会在每次字段更改后提交，因为它使用去抖动功能仅在用户停止输入后提交。

话虽如此，如果您不希望过滤器表单自动提交，但更喜欢带有显式提交按钮的过滤器表单，则您必须自己构建一个自定义 <Filter> 组件 - react-admin 不会'不提供这样的组件。

这是一个示例自定义过滤器表单：

import * as React from 'react';
import { Form } from 'react-final-form';
import { Box, Button, InputAdornment } from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
import { TextInput, NullableBooleanInput, useListContext } from 'react-admin';

const PostFilterForm = () => {
  const {
    displayedFilters,
    filterValues,
    setFilters,
    hideFilter
  } = useListContext();

  if (!displayedFilters.main) return null;

  const onSubmit = (values) => {
    if (Object.keys(values).length > 0) {
      setFilters(values);
    } else {
      hideFilter("main");
    }
  };

  const resetFilter = () => {
    setFilters({}, []);
  };

  return (
    <div>
      <Form onSubmit={onSubmit} initialValues={filterValues}>
        {({ handleSubmit }) => (
          <form onSubmit={handleSubmit}>
            <Box display="flex" alignItems="flex-end" mb={1}>
              <Box component="span" mr={2}>
                {/* Full-text search filter. We don't use <SearchFilter> to force a large form input */}
                <TextInput
                  resettable
                  helperText={false}
                  source="q"
                  label="Search"
                  InputProps={{
                    endAdornment: (
                      <InputAdornment>
                        <SearchIcon color="disabled" />
                      </InputAdornment>
                    )
                  }}
                />
              </Box>
              <Box component="span" mr={2}>
                {/* Commentable filter */}
                <NullableBooleanInput helperText={false} source="commentable" />
              </Box>
              <Box component="span" mr={2} mb={1.5}>
                <Button variant="outlined" color="primary" type="submit">
                  Filter
                </Button>
              </Box>
              <Box component="span" mb={1.5}>
                <Button variant="outlined" onClick={resetFilter}>
                  Close
                </Button>
              </Box>
            </Box>
          </form>
        )}
      </Form>
    </div>
  );
};

这记录在：https://marmelab.com/react-admin/List.html#building-a-custom-filter

编辑 2021-11-10：添加示例和文档链接

【讨论】：

我一直在关注React-admin 过滤器问题，这些问题与提交时过滤器有关。你在重复你需要实现一个自定义<Filter>，也许至少给出一个如何做的例子。这肯定会对社区有所帮助。
我通过一个示例和指向该文档的链接完成了答案。
感谢您的更新。我还研究了这个项目，并开始构建一个新的SubmitFilter 组件，以删除FilterForm 中的<FormSpy ... 。它有点工作，我清理代码后正要在这里发布答案。我也会试试你的建议。