ReferenceInput选择过滤器组件形式的输入

Question

我为我的列表视图构建了一个自定义筛选器组件，而我在填充属性的所有可用选项的选择输入时遇到了麻烦。例如

<Form onSubmit={onSubmit} initialValues={filterValues} >
    {({ handleSubmit }) => (
       <form onSubmit={handleSubmit}>
          <ReferenceInput label="Ring Id" source="ringid" reference="candidates">
              <SelectInput optionText="ringid" />
          </ReferenceInput>
       </form>
     )}
</Form>

无需构建“ getMany”数据提供者，我告诉我，我可以访问从“ getList”提供者提取的所有（2,000多个ID）“铃声”，并将每个ID列出到SelectInput字段中，并在我的自定义过滤器组件中进行搜索。

提出的问题：

1. 我必须硬编码可以得到的结果数量（默认值25）
2. [当我提交表单以通过过滤器组件进行搜索时，“关联的引用似乎不再可用。”出现并且搜索失败。
3. “ getMany”组件仅构建了一半，但似乎ReferenceInput只想使用“ getMany”（我被告知构建后端和构建使用getMany的代码并不是构建的优先事项，因此我不能自己构建它）

25 Populated IDs Screenshot

Form Error when Filter is submitted ScreenShot

因此，我希望在正确的方向上提供一些帮助，以在getList dataProvider中填充所有可用id的SelectInput，并确保甚至可以在我的Filter表单组件中使用此输入。预先感谢您的任何反馈。

Answer 1

1：是的，我认为没有将分页添加到ReferenceInput的选项，您必须对其进行硬编码，但是，如果后端已经支持文本搜索，则可以将AutocompleteInput用作子项，从而允许用户过滤结果：

<ReferenceInput 
     label="Ring Id" 
     source="ringid" 
     reference="candidates"
     filterToQuery={searchText => ({ paramNameThatYourBackendExpects: searchText })}
>
    <AutocompleteInput optionText="ringid" />
</ReferenceInput>

2＆3：3的发生是由于3。ReferenceInput仅“希望”使用getMany，因为它也支持SelectManyInput作为子对象，在这种情况下，一次获取所有选定的选项比一个一个地调用要好，因此，为了简化代码，ReferenceInput始终使用getMany。如果您无法实现getMany的后端部分，但可以将代码添加到dataProvider，则可以通过执行多个getOne调用来实现getMany：

假设使用v3 dataProvider：

this.getMany = async (resource, params) => {

    const response = {data: []}

    for (const id of params.id) {
        response.data.push(await this.getOne(resource, {id}))
    }

    return response
}

v2与实现有关，请遵循相同的原理。

如果您无法更改dataProvider，例如第三方可用的dataProvider，则可以将其包装：

v3

const fakeGetManyDataProvider = dataProvider => ({
    ...dataProvider,
    getMany: async (resource, params) => {
        const response = {data: []}

        for (const id of params.id) {
            response.data.push(await dataProvider.getOne(resource, {id}))
        }

        return response
    }
})

v2

import { GET_MANY, GET_ONE } from 'react-admin'

const fakeGetManyDataProvider = dataProvider => async (verb, resource, params) => {
    if (verb === GET_MANY) {
            const response = {data: []}

            for (const id of params.id) {
                response.data.push(await dataProvider(GET_ONE, resource, {id}))
            }

            return response
    }
    return dataProvider(verb, resource, params)
}

[请注意，为简化起见，省略了错误处理，反应管理员期望拒绝的承诺而不是未处理的期望，因此您必须处理错误。