如何在 react-admin 的 ReferenceInput 字段中格式化选项的文本?
How to format the text of the choices in a ReferenceInput field in react-admin?
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>
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 />}/>
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>
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 />}/>