是否可以将用户搜索过滤器添加到 React Admin v3 中的 ReferenceManyField 中？

Question

使用 React Admin 可以将过滤器添加到列表组件中。演示中可以看到这样的示例：https ://marmelab.com/react-admin-demo/#/commands

此特定组件的代码：https://github.com/marmelab/react-admin/blob/master/examples/demo/src/orders/OrderList.js

const OrderFilter = withStyles(filterStyles)(({ classes, ...props }) => (
<Filter {...props}>
    <SearchInput source="q" alwaysOn />
    <ReferenceInput source="customer_id" reference="customers">
        <AutocompleteInput
            optionText={choice =>
                `${choice.first_name} ${choice.last_name}`
            }
        />
    </ReferenceInput>
    <DateInput source="date_gte" />
    <DateInput source="date_lte" />
    <TextInput source="total_gte" />
    <NullableBooleanInput source="returned" />
</Filter>));

...

const OrderList = ({ classes, ...props }) => (
<List
    {...props}
    filterDefaultValues={{ status: 'ordered' }}
    sort={{ field: 'date', order: 'DESC' }}
    perPage={25}
    filters={<OrderFilter />}
>
    <StyledTabbedDatagrid />
</List>
);

但是，我无法弄清楚将相同的功能添加到ReferenceManyField。例如，在演示网站中，这将是客户编辑组件的“订单”选项卡。有没有办法为 ReferenceManyField 配置 Filter 组件？

Answer 1

也许您已经找到了正确的答案，但对于那些仍然遇到此问题的人来说。这是一个简单的解决方案。只需在 ReferenceManyField 中使用 List 即可。

const MyFilter = (props) => (
    <Filter {...props}>
        <ReferenceInput
            label="MyFilter"
            source="wallet"
            reference="wallets"
            sort={{ field: 'name', order: 'ASC' }}
            filterToQuery={searchText => ({ name: searchText })}
            allowEmpty={true}
            alwaysOn
        >
            <AutocompleteInput optionText="name" />
        </ReferenceInput>
    </Filter>
);

<ReferenceManyField
    label={false}
    reference="wallets"
    target="user"
>
   <List filter={{ user: record.id}} filters={<MyFilter />}>
      <Datagrid {...props}>         
         <ReferenceField source="vendor" resource="vendors" reference="vendors">
            <TextField source="name"/>
         </ReferenceField>
      </Datagrid>
   </List>
</ReferenceManyField>