使用 OnChange，如何更改 React-Admin 中 <ArrayInput> <SimpleFormIterator><ReferenceInput> 内的值

Question

我有以下组件，我试图在“饮料编辑视图”中使用它。在“饮料”中我嵌套了“成分”，但成分也是相关资源。

我想从相关资源中选择成分并设置嵌套字段（在饮料中）“record.ingredients[idx].name”，“record.ingredients.[idx]._id”，“record.ingredients.[idx” ].单位”。

但是我无法改变嵌套，即使我使用索引[0]来测试，它也不起作用，我也不知道如何获取索引。

现在的样子，例如，如果我更改成分，饮料的名称就会更改，因为该组件位于饮料编辑视图内。

我尝试了FormDataConsumer、RecordContext，但没有成功。

import {
    AutocompleteInput, ArrayInput, SimpleFormIterator, ReferenceInput, TextInput, NumberInput, BooleanInput,
    AutocompleteInputProps, FormDataConsumer,
} from 'react-admin';
import { useFormContext } from 'react-hook-form';

export const ArrayInputForIngredients = () => {
    const { setValue } = useFormContext();
    const handleIngredientChange: AutocompleteInputProps['onChange'] = (
        value,
        record
    ) => {
        setValue('name', record?.name); // NOT WORKING, CHANGES THE NAME OF THE DRINK
        setValue('unit', record?.unit);
        setValue('_id', record?._id);
    };

    return (
        <ArrayInput source="ingredients">
            <SimpleFormIterator inline >
                <ReferenceInput source="_id" reference="ingredients" >
                    <AutocompleteInput label="Ingrediente" 
                    source="_id" 
                    optionText={"name"} 
                    onChange={handleIngredientChange} />
                </ReferenceInput>
                <TextInput source="name" />
                <TextInput source="unit" />
                <BooleanInput source="decorative" />
                <BooleanInput source="optional" />
                <NumberInput source="quantity" />
            </SimpleFormIterator>
        </ArrayInput>
    )
}

组件位于类似这样的东西（简化的）内部：

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

我在

AutoCompleteInput

中选择要更改的每种成分的名称和其他数据，而不是饮料的名称。

Answer 1

如果我没理解错的话，你需要根据所选的参考成分预先填写

name

和

unit

的值，对吗？

如果是这样，直接调用

setValue('name', record?.name)

是行不通的，因为你需要使用

FormDataConsumer

的

getSource

来计算嵌套在

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