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

【问题标题】：How to reset filter values in react admin framework?如何在反应管理框架中重置过滤器值？
【发布时间】：2019-03-26 08:21:27
【问题描述】：

我有一个过滤器组件：

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

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

【问题讨论】：

你的表单使用了redux-form吗？如果有你可以看到stackoverflow.com/a/42726072/7034009 。在按钮重置操作中使用this.props.reset() 或this.props.initialize({})
是的，react-admin 使用了redux-form under the hood，所以这也是调查的正确方向

标签： redux react-redux redux-saga react-admin

【解决方案1】：

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

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

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

虽然这取决于你想要如何处理这一切，但没有足够的信息来了解你是如何做到的，所以我只是在推测人们做事的常见方式。

【讨论】：

谢谢。很好，但问题是如何使用 react-admin 框架来做到这一点。

【解决方案2】：

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

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

【讨论】：

感谢亚历克斯的回复。我充满希望 resetForm 能解决我的问题，但我已经检查过了，但事实并非如此。我看到通过按钮单击有RA/RESET_FORM 事件调度，但它实际上什么都不做。但我觉得答案就在附近……
@SashaKos，np。你可以检查setFilter 操作吗？我已经更新了答案
感谢@Alex 的建议，但无法直接致电setFilter。它会导致错误Actions must be plain objects. Use custom middleware for async actions. 所以我尝试直接调度dispatch({type: CRUD_SET_FILTER, payload: { field, value }, meta: { resource }}) 并且我看到事件正在调度，但过滤器仍然没有清除
@SashaKos 我更新了答案，希望它最终对你有用（我检查过，它应该！）:)
谢谢，@Alex。我会检查它，但看起来就是这样。

【解决方案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>
    )}

【讨论】：

这个解决方案对我有用，而接受的答案却没有。我在 react-admin 2.7 上。

【解决方案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 />}
  >

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

【讨论】：

【解决方案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

【讨论】：