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

Question

In react-admin , I have an input whose source is a list of objects.

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

The binded_cameras list looks like this:

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

I am trying to get only the list of id to deal with.
I tried binded_cameras.id but of course it did not work.
How do I manipulate this list of objects, and generate only a list of ids?

Answer 1

Since React-admin uses react-final-form, you can it's use parse() and format() functions to transform the input value when saving to and loading from the record, just pass them as props to Input, in this case CheckboxGroupInput:

Mnemonic for the two functions:

parse(): input -> record

format(): record -> input

<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