如何在 react-admin 的 ReferenceInput 字段中格式化选项的文本？

Question

The ReferenceInput field in combination with SelectInput allows to populate the option texts from a column of a referenced resource by giving the name of the column like so:

<ReferenceInput label="Location name" source="id" reference="Location">
 <SelectInput optionText={"building"} />
</ReferenceInput>

I'd like to combine the option text from several columns, but I don't know how I access the current record. I want to achieve something like in this code (that of course does not work, just to show what I mean):

<ReferenceInput label="Location name" source="id" reference="Location">
 <SelectInput optionText=`${record.building} ${record.room}` />
</ReferenceInput>

Answer 1

optionText also accepts a function, so you can shape the option text at will:

const choices = [
   { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
   { id: 456, first_name: 'Jane', last_name: 'Austen' },
];
const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
<SelectInput source="author_id" choices={choices} optionText={optionRenderer} />

optionText also accepts a React Element, that will be cloned and receive the related choice as the record prop. You can use Field components there.

const choices = [
   { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
   { id: 456, first_name: 'Jane', last_name: 'Austen' },
];
const FullNameField = ({ record }) => <span>{record.first_name} {record.last_name}</span>;
<SelectInput source="gender" choices={choices} optionText={<FullNameField />}/>