为 react-admin 列表视图添加自定义过滤器下拉列表答案

【问题标题】：Add a custom filter drop down for react-admin List view为 react-admin 列表视图添加自定义过滤器下拉列表
【发布时间】：2020-05-01 05:50:21
【问题描述】：

问题 1：我有一个包含“活动”列的列表视图：

我想让用户从单选按钮组中选择活动/非活动作为过滤器（或下拉菜单）。我知道 react-admin 为参考字段提供了开箱即用的过滤器。像“Active”这样的非参考字段呢？

问题 2：有什么方法可以在搜索栏添加清除按钮或“X”以快速清除所有过滤器？目前，您必须选择搜索中的内容并清除文本。烦人的必须使用鼠标和键盘来清除过滤器。但是，我猜有办法解决它。

谢谢。

【问题讨论】：

标签： reactjs react-admin

【解决方案1】：

我想允许用户从单选按钮中选择活动/非活动分组为过滤器（或下拉菜单）。我知道 react-admin 提供过滤器开箱即用的参考字段。非参考字段呢，喜欢“主动”？

有BooleanInput and NullableBooleanInput。文档写得很好，有很多输入组件可供使用。

问题 2：通过搜索字段添加清除按钮或“X”的任何方式快速清除所有过滤器？目前，您必须选择其中的内容搜索并清除文本。恼人的不得不使用鼠标和键盘清除过滤器。但是，我猜有办法解决它。

如果您使用 TextInput 搜索字段，则支持 resettable

将这两件事结合起来，您应该在过滤器组件中有或多或少相似的代码：

<Filter {...props}>
   <TextInput label="Search" source="q" alwaysOn resettable />
   <NullableBooleanInput label="Is Active" source="active" alwaysOn/>
</Filter>

【讨论】：

正是我所需要的。谢谢。