React Admin - How can I get each selected data of AutocompleteInput in ArrayInput?

Question

Is there any way to get the full data (not only id) of each AutocompleteInput in the ArrayInput? I want to sum the total price of the items in ArrayInput. Here is the sample of item record { id: 1, name: 'item 1', price: 100}.

<ArrayInput source="items">
    <SimpleFormIterator>
      <ReferenceInput
        label="Item"
        source="id"
        reference="items"
      >
        <AutocompleteInput
          matchSuggestion={matchSuggestion}
          optionText={<ItemOptionField />}
          inputText={itemInputText}
        />
      </ReferenceInput>
    </SimpleFormIterator>
  </ArrayInput>

ArrayInput has a props "onChange" to pass a callback on change no ? Can't you retrieve the value of all the autocompletes as a JSON passed as parameter to this callback ? Maybe event.target.value ? — Ricola3D, Mar 02 '22 at 12:25
"onChange" for ArrayInput doesn't been fired when the value changing . It works for ReferenceInput, but only return a string id. However, I found the "onSelect" for AutocompleteInput could get the complete data object. — Vincent, Mar 04 '22 at 10:59

score 0 · Answer 1 · answered Mar 09 '22 at 12:51

I think FormSpy is exactly what you need. See the answer of this post that seems to match exactly what you need ?

<SimpleForm>
    <ArrayInput source="students">
            <SimpleFormIterator>
              <TextInput source="name" /
              <NumberInput source="role" />
            </SimpleFormIterator>
          </ArrayInput>
     <FormSpy
         subscription={{ valid: true }}
         onChange={props => {
             setFormValues(props.values);
         }}
      />
  </SimpleForm>

React Admin - How can I get each selected data of AutocompleteInput in ArrayInput?

1 Answers1