如何使用动态选项文本？

Question

我们有以下显示 select 风格的用户体验：

    <ReferenceInput source="visibility.visibilityId" reference="projectVisibilities" allowEmpty>
      <SelectInput optionText="visibility" />
    </ReferenceInput>

我们想在 visibility 中添加括号 description。

像这样：

    <ReferenceInput source="visibility.visibilityId" reference="projectVisibilities" allowEmpty>
      <SelectInput optionText={["visibility", "(", "description", ")" } />
    </ReferenceInput>

加入数组后，未找到的字符串将呈现为常规字符串，visibility 和 description 作为 select 输入的选项文本。

这已经成为可能了吗？

Answer 1

optionText接受一个函数，所以你可以随意塑造选项文字：

const optionRenderer = choice => `${choice.visibility} (${choice.description})`;

<SelectInput optionText={optionRenderer} />

optionText 甚至接受一个 React 元素，该元素将被克隆并接收相关的选择作为 record 道具。您可以在那里使用 Field 组件：

const DescriptionField = ({ record }) => <span>{record.visibility} ({record.description})</span>;

<SelectInput optionText={<DescriptionField />}/>

请注意，这在 React-admin 文档中有明确记录：

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

如何使用动态选项文本？

How to use a dynamic optionText?

react-admin