过滤 通过自定义参数

Question

我正在使用react-admin（v3.2），并试图创建一个自定义过滤器组件。我的实体具有dateEnd属性，我想根据dateEnd是expired还是not expired来过滤数据。我设法获得了所有实体的列表：expired和not expired。

但是我不知道如何向用户显示此列表。是否可以通过某种方式在URL中创建查询？

这是我的方法，它返回expired和not expired实体的列表：

handleChecked = () => {
  if(this._mounted) 
  {
     this.setState({ checked: !this.state.checked, currentDate: new Date()}, () =>
       {
          const currentDateFormated = this.state.currentDate.toISOString();
          if (this.state.msgDates !== null)
          {
             if (this.state.checked === false)
             {
                const notExpired = this.state.msgDates.filter(msg => get(msg, ["publish", "dateEnd"], []) > currentDateFormated);
                        console.log(notExpired, 'NOTEXPIRED');
             }
             else
             {
                 const expired = this.state.msgDates.filter(msg => get(msg, ["publish", "dateEnd"], []) < currentDateFormated);
                        console.log(expired, 'EXPIRED');
              }
           }
      });
   }
}

然后我在Filter中初始化我的组件：

const MessageFilter = (props) => (
   <Filter {...props}>
     <TextInput source="_id" alwaysOn />
     <TextInput source="layout.caption" alwaysOn />
     <ExpiredFilter alwaysOn />
   </Filter>
);

任何想法如何显示已过期或未过期实体的列表？

先谢谢您。

Answer 1

您打算过滤的任何内容都应包含在<List>中。在您的情况下，您的Resource / endpoint应该返回一个dateEnd（到期或未到期）。两种设计模式可以在这里工作：

First，您可以使用filterDefaultValues属性。tl; dr使用默认查询（status），切换expired / not_expired（可以使用Tabs呈现）。

这将回答您的两个问题：

• “是否可以通过某种方式在URL中创建查询？”
• 任何想法如何显示已过期或未过期实体的列表？

<List
  {...props}
  // Do you want your users to start by seeing "expired" or "not expired"?
  // You can place it within `filterDefaultValues`
  filterDefaultValues={{ status: 'not_expired' }}
  sort={{ field: 'date_added', order: 'DESC' }}
  perPage={10}
>{ Children }</List>

例如，获得children组件以通过使用status更新该Tabs字段。那些Tabs将更新您的state，可以使用List或status将其传播到class methods的Hooks道具。

Second，您可以使用filters道具。有趣的是，这是您的初衷，但它挫败了您想要的。 tl; dr最初同时返回expired和not expired，并留给用户通过filters查询。

[使用这种方法，通常会同时渲染List和expired的not expired。然后提供filters道具，以允许用户筛选他们想要看到的内容。

<List
  {...props}
  // So you'd place your `MessageFilter` within `filters`
  filters={<MessageFilter />}
  sort={{ field: 'date_added', order: 'DESC' }}
  perPage={10}
>{ Children }</List>

即使在这里，您仍然要查询该数据，但没有默认值。因此，用户最初会看到一长串所有您的记录。

根据您的数据，第一种方法效果最好。但实际上，根据您的目的，两个props实际上可以同时使用。