React-Admin 在 SelectInput 中将值更改为自定义值

Posted

技术标签:

【中文标题】React-Admin 在 SelectInput 中将值更改为自定义值【英文标题】:React-Admin Change values to custom values in the SelectInput 【发布时间】:2019-12-02 17:45:44 【问题描述】:

我在 react-admin 中使用了以下代码:

<ReferenceInput label="Animal" source="id"reference="animal">
   <SelectInput optionText="type" choices=[ id: '0', name: 'Cat' ,  id: '1', name: 'Dog',]/>
</ReferenceInput>

在该代码中,它从我的数据库接收值“0”到猫和“1”到狗,当我单击下拉菜单时,它显示“0”和“1”,但我只想显示猫和 Dog 而不是我的 SelectInput 中的“0”和“1”。

我尝试使用:choices=[ id: '0', name: 'Cat' , id: '1', name: 'Dog',],但在下拉列表中没有效果。

有人知道我该怎么做吗?

【问题讨论】:

【参考方案1】:

你可以传入 optionText 属性来显示所选记录的功能,而不是带有字段名称的字符串:

<ReferenceInput label="Animal" source="id" reference="animal">
   <SelectInput optionText= choice => choice.type === 0 ? 'Cat' : 'Dog' />
</ReferenceInput>

【讨论】:

【参考方案2】:

我发现了我的问题。

来自数据库的值只是一个数值 (0, 1),而我使用的是 ('0', '1')。因此,SelectInput 无法使用正确的值在 DropDown 中显示。

正确的方式应该是这样的:

<SelectInput 
 optionText = "type" 
 choices = [id: 0, name: 'Cat', id: 1, name: 'Dog',] 
/>

其中数值不使用引号。

【讨论】:

以上是关于React-Admin 在 SelectInput 中将值更改为自定义值的主要内容,如果未能解决你的问题,请参考以下文章

无法在 react-admin 中自定义用户菜单

如何在 React Typescript 应用程序中导入 react-admin?

react-admin 没有'访问控制允许来源'

react-admin登录传奇没有运行

仪表板上的 React-admin 组件?

在 react-admin 中成功认证后如何重定向到其他路由