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

Question

ReferenceInput 字段与 SelectInput 结合使用，可以通过给出列名来填充引用资源的列中的选项文本，如下所示：

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

我想合并几列中的选项文本，但我不知道如何访问当前记录。 我想在这段代码中实现类似的东西（这当然行不通，只是为了说明我的意思）：

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

Answer 1

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

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 也接受一个 React 元素，它将被克隆并接收 相关选项为 record 道具。您可以在那里使用 Field 组件。

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 />}/>