如何在反应管理框架中重置过滤器值？

Question

我有一个过滤器组件：

export const PostsFilter = (props) => (
  <Filter {...props}>
    <TextInput label='Post ID' source='id' alwaysOn />
    <TextInput label='User ID' source='user_id' alwaysOn />
  </Filter>
);

我需要添加一个重置按钮来清除输入值。我知道应该通过将 smth 调度到 redux 来完成。那么也许有人已经解决了这个问题？谢谢！

Answer 1

听起来您想清除 TextInput 中的值，这不需要 redux 查看您给我们的内容。

其中一种使用方法是通过 onChange() 函数将过滤器输入保存到状态 - 这可能也是您调用操作以命中后端或更改状态的地方你的道具。

要重置，您可以让 onClick() 中的另一个按钮调用 handleReset(inputId)，您可以调用 setState({filterUser: 'testUser123'}) 来完成您的要求。

虽然这取决于您希望如何处理这一切，但没有足够的信息来了解您是如何处理的，所以我只是推测人们处理事情的常见方式。

Answer 2

你的过滤器组件中有一个setFilters道具，你可以使用它：

export const PostsFilter = (props) => (
  <div>
    <Filter {...props}>
      <TextInput label='Post ID' source='id' alwaysOn />
      <TextInput label='User ID' source='user_id' alwaysOn />
    </Filter>
    <Button onClick={() => props.setFilters({
          id: '',
          user_id: ''
     })}>Clear fields</Button>
  <div>
);

Answer 3

不幸的是，setFilters 对我没有任何作用。这是问题的解决方案：

<FormDataConsumer form={'filterForm'} alwaysOn source='stateId'>
      {({ formData, dispatch, ...rest }) => (
        <ReferenceInput
          resource={props.resource}
          source='stateId'
          reference='states'
          onChange={value => {
            dispatch(change('filterForm', 'districtId', null));
          }}
          allowEmpty>
          <SelectInput optionText='name' />
        </ReferenceInput>
      )}
    </FormDataConsumer>

    {(props.filterValues.stateId || props.filterValues.districtId) && (
      <ReferenceInput
        key={props.filterValues.stateId}
        source='districtId'
        reference='districts'
        filter={{ stateId: props.filterValues.stateId }}
        alwaysOn>
        <SelectInput optionText='name' />
      </ReferenceInput>
    )}

Answer 4

const PostActions = ({
  bulkActions,
  basePath,
  currentSort,
  displayedFilters,
  exporter,
  filters,
  filterValues,
  onUnselectItems,
  resource,
  selectedIds,
  showFilter,
  total,
  setFilters,
}) => (
  <CardActions>
    {/* Add your custom actions */}
    <Button variant="text" onClick={() => setFilters({})}>
      Clear Filters
    </Button>
    {bulkActions &&
      React.cloneElement(bulkActions, {
        basePath,
        filterValues,
        resource,
        selectedIds,
        onUnselectItems,
      })}
    {filters &&
      React.cloneElement(filters, {
        resource,
        showFilter,
        displayedFilters,
        filterValues,
        context: 'button',
      })}
    <ExportButton
      disabled={total === 0}
      resource={resource}
      sort={currentSort}
      filter={filterValues}
      exporter={exporter}
    />
  </CardActions>
); 

<List
    {...props}
    filters={<LeadTimeFilter />}
    bulkActions={false}
    actions={<PostActions />}
  >

您可以在 actions.In 中添加一个重置按钮，该操作可以获得“setFilters”方法，该方法可以从道具中重置过滤器。

Answer 5

以下是我创建“清除过滤器”按钮的方法 ("react-admin": "3.10.2")。

延伸至 custom ListActions toolbar example...

import { FilterList } from "@material-ui/icons";
import React from "react";
import {
    Button,
    sanitizeListRestProps,
    TopToolbar
} from "react-admin";

const ListActionsTopToolbar = (props) => {
  const {
    className,
    exporter,
    filters,
    maxResults,
    setFilters,
    ...rest
  } = props;
  return (
    <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
        
        {/* Clear Filters Button */}
      <Button onClick={() => setFilters({})} label="Clear Filters">
        <FilterList />
      </Button>

    </TopToolbar>
  );
};

回溯：https://github.com/marmelab/react-admin/issues/816#issuecomment-734030723

如何在反应管理框架中重置过滤器值？

How to reset filter values in react admin framework?

redux

redux-saga

react-redux

react-admin