如何在 react-admin 中重用过滤器输入

问题描述

我希望将 <Input> 过滤器组件作为可重用组件。所以，而不是：

// list.js
<Filter {...props}>
  <TextInput source="abc" />
  <SelectInput source="foo"  choices={[
    { id: 'bar',name: 'bar' },{ id: 'baz',name: 'baz' },]}/>
</Filter>

我想要：

// my-select-input.js
export const MySelectInput = props => (
  <SelectInput source="foo"  choices={[
    { id: 'bar',]}/>
)

// list.js
<Filter {...props}>
  <TextInput source="abc" />
  <MySelectInput />
</Filter>

不幸的是，过滤器工具栏中导出组件的位置与“正常”输入组件的其余部分不同。我怀疑它会被装饰，因为它是“正常”的输入组件。

解决方法

React-admin 的 <Filter> 内省其子项以构建过滤器名称列表。如果其中一个孩子没有 source（或没有 label），那么它将无法在过滤器下拉列表中列出。

将源设置为 defaultProps 的修复。

// my-select-input.js
export const MySelectInput = props => (
  <SelectInput source="foo"  choices={[
    { id: 'bar',name: 'bar' },{ id: 'baz',name: 'baz' },]}/>
)
+MySelectInput.defaultProps = {
+ source: "foo",+};