javascript - React-Admin:如何处理对象列表上的输入源

标签 javascript reactjs react-admin

react-admin中,我有一个输入,其源是对象列表。

<CheckboxGroupInput  source="binded_cameras" choices={choices}/>

binded_cameras 列表如下所示:

"binded_cameras": [
    {
       "id": 1,
       "name": "Cam 1",
       "url": "dummyurl.com"
    },
    {
       "id": 4,
       "name": "Cam 2",
       "url": "dummyurl.com"
     }
]

我试图仅获取要处理的id列表。
我尝试了binded_cameras.id,但当然它不起作用。
/> 如何操作此对象列表,并仅生成 id 列表?

最佳答案

由于React-admin使用react-final-form,你可以在保存和加载记录时使用parse()和format()函数来转换输入值,只需将它们作为props传递给Input,在此案例 CheckboxGroupInput:

两个函数的助记符:

parse():输入 -> 记录

format():记录->输入

<CheckboxGroupInput 
    source="binded_cameras" 
    choices={choices}
    parse={ids => ids.map(id => ({id}))}
    format={bindedCameras => bindedCameras.map(b => b.id)}
/>

https://marmelab.com/react-admin/Inputs.html#transforming-input-value-tofrom-record

关于javascript - React-Admin:如何处理对象列表上的输入源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61383769/

相关文章:

javascript - 需要使用 fetch 从(laravel api)获取数据,然后将其解析到另一个函数

javascript - 在 react-admin 中显示确认对话框的最简单方法是什么?

javascript - 文字出现放大效果

angular - 如何在 Reactjs 中制作类似 Angular 路由器导出?

javascript - 如何作为 e.target 获取指定 onClick 的确切元素?

javascript - storageRef.child 不是 firebase 中的函数

mysql - 即使在添加 X-Total-Count 后,分页和排序也无法按预期在 react-admin 中工作

javascript - 如何使用 angular2 primeng 让子元素显示在搜索中并在单击“全部”时显示所有元素

javascript - 使用 globbing 在 Grunt 中加载 HTML <head> 中的多个文件

javascript - 在 Cordova 中合并一个文件的多个部分