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

时间:2020-04-23 09:26:18

标签: javascript reactjs react-admin

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

1 个答案:

答案 0 :(得分:1)

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