Использование OnChange, как изменить значения внутри <ArrayInput> <SimpleFormIterator><ReferenceInput> в React-Admin

Если я правильно понимаю, вам нужно предварительно заполнить значения name и unit на основе выбранного ингредиента, на который указывает ссылка, верно?

Ответ для реакции-администратора v4

Если это так, прямой вызов setValue('name', record?.name) не может работать, потому что вам нужно использовать getSource FormDataConsumer для вычисления исходного пути для входных данных, вложенных внутри ArrayInput.

Один из способов добиться этого — использовать HOF следующим образом:

const TagsInput = () => {
  const { setValue } = useFormContext();
  const onChange = (source) => (_id, record) => {
    setValue(source, record?.name?.en);
  };
  return (
    <ArrayInput source = "tags">
      <SimpleFormIterator inline>
        <FormDataConsumer>
          {({ getSource }) => (
            <ReferenceInput source = {getSource("id")} reference = "tags">
              <AutocompleteInput
                label = "Tags"
                source = "id"
                optionText = {"name.en"}
                onChange = {onChange(getSource("name"))}
              />
            </ReferenceInput>
          )}
        </FormDataConsumer>
        <TextInput source = "name" />
      </SimpleFormIterator>
    </ArrayInput>
  );
};

А потом

export const PostEdit = () => {
    return (
        <Edit>
          <SimpleForm>
            <TextInput source= "name" />
            <TagsInput />
          </SimpleForm>
        </Edit>
    )
};

Рабочий пример в следующей песочнице (с вводом тегов, в PostEdit, вкладка «Разное»): https://codesandbox.io/p/devbox/young-platform-z7x5lf

Обновлено: Обновлена ​​песочница для реакции-администратора v5.

https://stackblitz.com/edit/github-vakown?file=src%2Fposts%2FPostEdit.tsx

Соответствующий код:

const TagAutocompleteInput = () => {
  const sourceContext = useSourceContext();
  const nameInputSource = sourceContext.getSource('name');
  const { setValue } = useFormContext();
  const onChange = (_id, record) => {
    setValue(nameInputSource, record?.name?.en);
  };
  return (
    <ReferenceInput source = "id" reference = "tags">
      <AutocompleteInput
        label = "Tags"
        source = "id"
        optionText = {'name.en'}
        onChange = {onChange}
      />
    </ReferenceInput>
  );
};

const TagsInput = () => (
  <ArrayInput source = "tags">
    <SimpleFormIterator inline>
      <TagAutocompleteInput />
      <TextInput source = "name" />
    </SimpleFormIterator>
  </ArrayInput>
);

Это использует useSourceContext из реакции-администратора.

Благодаря @ slax57 мне было трудно заставить его работать (я попробовал FormDataConsumer, но не смог заставить его работать правильно). Я помещу свой ответ здесь, потому что я также включил решение по изменению входной «единицы». Теперь onChange принимает 2 источника.

export const ArrayInputForIngredients = () => {
    const { setValue } = useFormContext();
    const onChange = (sourceOne, sourceTwo) => (_id, record) => {
      setValue(sourceOne, record?.name);
      setValue(sourceTwo, record?.unit);
    };
    return (
      <ArrayInput source = "ingredients">
        <SimpleFormIterator inline>
          <FormDataConsumer>
            {({ getSource }) => (
              <ReferenceInput source = {getSource("_id")} reference = "ingredients">
                <AutocompleteInput
                  label = "Ingrediente"
                  source = "_id"
                  optionText = {"name"}
                  onChange = {onChange(getSource("name"), getSource("unit"))}
                />
              </ReferenceInput>
            )}
          </FormDataConsumer>
          <TextInput source = "name" />
          <TextInput source = "unit" />
        </SimpleFormIterator>
      </ArrayInput>
    );
  };

Решение React-Admin V5

Теперь вставляю поля, причем без GetSource (убрано на V5)

export const ArrayInputForIngredients = () => {
    const { data, isLoading } = useGetList('ingredients');

    const IngredientAutocompleteInput = () => {
        const sourceContext = useSourceContext();

        const nameInputSource = sourceContext.getSource('name');
        const unitInputSource = sourceContext.getSource('unit');
        const abvInputSource = sourceContext.getSource('abv');


        const { setValue } = useFormContext();
        const onChangeIngredient = (_id, record) => {
            setValue(nameInputSource, record?.name);
            setValue(unitInputSource, record?.unit);
            setValue(abvInputSource, record?.abv);
        };
        return (
            <>
                <ReferenceInput source = {"_id"} reference = "ingredients"
                    sort = {{ field: 'name', order: 'ASC' }} >
                    <Grid item xs = {12} md = {6} xl = {3} >
                        <AutocompleteInput
                            label = "Ingrediente"
                            source = "_id"
                            validate = {required("Nome necessário")}
                            optionText = "name"
                            isLoading = {isLoading}
                            onChange = {onChangeIngredient}
                            filterToQuery = {searchText => ({ name: searchText })}
                            fullWidth
                        />
                    </Grid>
                </ReferenceInput>
                <TextInput source = "name" sx = {{
                    display: "none",
                }} />
                <NumberInput source = "abv" sx = {{
                    display: "none",
                }} />
            </>
        )

    }

А затем используйте его как компонент:

<SimpleFormIterator inline >
                        <IngredientAutocompleteInput />
</SimpleFormIterator>