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

【问题标题】：Is it possible to add user search filters to a ReferenceManyField in React Admin v3?是否可以将用户搜索过滤器添加到 React Admin v3 中的 ReferenceManyField？
【发布时间】：2020-02-28 23:54:05
【问题描述】：

使用 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 配置过滤器组件？

【问题讨论】：

标签： reactjs react-admin

【解决方案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>

【讨论】：

感谢@Mattin 分享这个答案。我确实注意到注入 List 组件的那一刻，ReferenceManyField 目标值被忽略了。您的代码有一个 { user: record.id } 来共享过滤器，但记录始终为空。有办法解决吗？
谢谢。缺少alwaysOn 导致它无法显示给我！

【解决方案2】：

您可以为此使用ListBase，the change 是在 3.10+ 版本中添加的。

<ReferenceManyField
    reference="some-reference"
    target="some-target">
    <ListBase syncWithLocation={true}>
        <ListToolbar
            filters={<YourFilter />}
            actions={<ListActions  hasCreate={true}/>}
        />
        <Datagrid>
            ///etc...
        </Datagrid>

        <Pagination/>
    </ListBase>
</ReferenceManyField>

【讨论】：

【解决方案3】：

您可以使用 ListBase 作为上述答案，但是在使用 ListBase 时，它会忽略 ReferenceManyField 中的目标字段。因此您需要对其进行过滤。

    const DataFilter = (props) => (
         <Filter {...props}>
             <TextInput label="Search by DataCode" source="id" alwaysOn />
          </Filter>
     );

        <ReferenceManyField
          reference="reference"
          target="targetRef"
          filter={{ targetRef: props.id }}
        >
          <ListBase {...props}  >
            <ListToolbar
              filters={<DataFilter />}
            />
            <Datagrid>
             //datagrid fields
          </Datagrid>
          </ListBase>

        </ReferenceManyField>

【讨论】：