React-Admin：如何处理对象列表中的输入源答案

【问题标题】：React-Admin: How do I handle an input source on a list of objectsReact-Admin：如何处理对象列表中的输入源
【发布时间】：2020-04-23 09:26:18
【问题描述】：

在react-admin 中，我有一个input，其源是对象列表。

<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 列表？

【问题讨论】：

你到底想在这里实现什么？您只想将list of ids 作为source 传递吗？
是的，完全正确。我通过修改传入数据找到了解决方案，但如果知道如何在 reactjs 上执行此操作，我将不胜感激。

标签： javascript reactjs react-admin

【解决方案1】：

由于 React-admin 使用 react-final-form，你可以使用 parse() 和 format() 函数在保存和加载记录时转换输入值，只需将它们作为道具传递给 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

【讨论】：