Как использовать динамический optionText?

Question

У нас есть следующее, что отображает выбранный стиль UX:

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

Мы хотим добавить в скобках description в visibility.

Примерно так:

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

Не найденная строка будет отображаться как обычная строка, а visibility и description - как optionText выбранного входа после присоединения к массиву.

Это уже возможно?

Answer 1

optionText принимает функцию, поэтому вы можете формировать текст опции по своему желанию:

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

<SelectInput optionText={optionRenderer} />

optionText даже принимает элемент React, который будет клонирован и получит соответствующий выбор в качестве реквизита записи.Здесь вы можете использовать компоненты Field:

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

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

Обратите внимание, что это четко задокументировано в документации React-admin:

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