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

Question

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

Answer 1

由于 React-admin 使用 react-final-form，您可以使用 parse() 和 format() 函数在保存到记录和从记录加载时转换输入值，只需将它们作为 props 传递给 Input，在这种情况下 CheckboxGroupInput:

两个函数的助记词：

解析(): 输入 -> 记录

格式（）：记录 -> 输入

<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

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

React-Admin: How do I handle an input source on a list of objects

javascript

reactjs

react-admin