How to reset filter values in react admin framework?

问题

I have a filter component:

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

I need to add a reset button that will clear input values. I understand that in should be done via dispatching smth to redux. So maybe somebody already solved this problem? Thanks!

回答1:

There is a setFilters prop in your filter component, you can use it:

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>
);

回答2:

Unfortunately, setFilters does nothing for me. Here is the solution to the problem:

<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>
    )}

回答3:

Here's how I created a "Clear Filters" button ("react-admin": "3.10.2").

Extending upon the 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>
  );
};

Traceback: https://github.com/marmelab/react-admin/issues/816#issuecomment-734030723

回答4:

It sounds like you want to clear the value in the TextInput, which doesn't need redux looking at what you've given us.

One of the approaches to use is saving the filter input to state through the onChange() function - which is maybe where you are also calling the action to hit the backend or change state for the posts that are in your props.

To reset, you can have another button that has in onClick() call to a handleReset(inputId) which you can call setState({filterUser: 'testUser123'}) on that will do what you are asking.

Though it depends how you are wanting to handle it all, there isn't enough information to see how you're doing that, so i'm just speculating on a common way people go about things.

回答5:

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 />}
  >

you can add a reset button in the actions.In the action can get the 'setFilters'method which can reset filters from the props.

来源：https://stackoverflow.com/questions/52926290/how-to-reset-filter-values-in-react-admin-framework