javascript - 如何在 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 Prop 的相关选择。您可以在那里使用 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 />}/>