AutocompleteArrayInput 显示空白条目

Question

我的数据库中有一个数组，我想使用 react-admin 进行 CRUD。 AutocompleteArrayInput 组件在所有方面都能满足我的需求，但只有一个。我遇到的问题是 AutocompleteArrayInput 不显示不在提供给组件的有限选项列表中的条目。如果选项列表中不存在条目，react-admin 不会显示插入的自定义文本，而是不显示文本，如下所示：

考虑以下示例：

Which colors do you like? Select all that apply

- Red
- Blue
- Green
- Other (write in your own)

示例数组包括：

• [“红色”]
• [“红”、“绿”]
• [“粉红”]
• [“栗色”]

我将 ["Red", "Blue", "Green"] 的数组传递给 react-admin 中的 AutocompleteArrayInput。前两个示例显示正常，因为“红色”和“绿色”都在已知列表中。但是，问题在于 react-admin 不显示“Pink”或“Maroon”的文本，而是显示一个空条目。

为了让 react-admin 显示原始输入文本而不是只显示空白，是否需要更改设置？

示例代码：

const my_choices = [
  {id:'red', name:'red'},
  {id:'green', name:'green'},
  {id:'blue', name:'blue'}
];

export const ResourceEdit = (props) => (
  <Edit {...props} redirect="list">
      <SimpleForm>
          <AutocompleteArrayInput source="Colors" choices = {my_choices} allowEmpty />
      </SimpleForm>
 </Edit>
);

对于上面的示例，我希望自动完成red、green 和blue，但是如果数组中存在另一种颜色，我也希望能够在管理界面中看到它，而不仅仅是让它显示为空白。

我是否缺少配置设置？如果可能，我想避免为组件提供详尽的选项列表。

环境

• React-admin 版本：2.9.2
• 未出现此问题的最新版本（如果适用）：未知
• 反应版本：16.8.6
• 浏览器：在 Chrome 和 Firefox 上测试

Answer 1

添加属性 optionText。

const choices = [
    { _id: 123, full_name: 'Leo Tolstoi', sex: 'M' },
    { _id: 456, full_name: 'Jane Austen', sex: 'F' },
];

<AutocompleteArrayInput source="author_id" choices={choices} optionText="full_name" optionValue="_id" />

https://marmelab.com/react-admin/Inputs.html#autocompletearrayinput

Answer 2

我遇到了同样的问题 - 原来我使用的是 ReferenceInput，而我应该使用 ReferenceArrayInput。

即

<ReferenceInput
    ...
>
    <AutocompleteArrayInput
        ...
    />
</ReferenceInput>

...应该是...

<ReferenceArrayInput
    ...
>
    <AutocompleteArrayInput
        ...
    />
</ReferenceArrayInput>