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

Question

问题 1：我有一个列表视图，其中有一列用于 "Active"：

我想允许用户从单选按钮组 select Active/Inactive 作为过滤器（或下拉菜单）。我知道 react-admin 提供开箱即用的参考字段过滤器。像 "Active" 这样的非引用字段呢？

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

谢谢。

Answer 1

I want to allow the user to select Active/Inactive from a radio button group as a filter (or dropdown). I know react-admin provides filters for reference fields out of the box. What about a non-reference field, like "Active"?

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

Question 2: Any way to add a clear button or "X" by the search field to quickly clear all filters? Currently, you have to select what's in Search and clear the text. Annoying having to use the mouse AND keyboard to clear filters. But, I'm guessing there's a way around it.

如果您使用 TextInput 作为搜索字段，则有道具 resettable

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

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

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

Add a custom filter drop down for react-admin List view

reactjs

react-admin