React-admin中如何从一个资源填充表单并提交到另一数据源？

要实现从source_measurement_protocol加载表单数据，提交时将数据更新到event_source_measurement_protocol_description_updated资源，你需要保留Edit组件的原资源配置以加载数据，同时自定义SimpleForm的保存逻辑，指定提交到目标资源。具体修改如下：

步骤1：导入所需钩子 #

首先引入react-admin提供的useDataProvider、useNotify和useRedirect钩子，用于手动处理数据提交、提示信息和页面跳转。

步骤2：自定义保存函数 #

创建一个自定义的保存函数，调用dataProvider的create（或update，根据后端接口设计选择）方法，将表单数据提交到目标资源。

步骤3：修改组件代码 #

import { Edit, SimpleForm, ReferenceInput, AutocompleteInput, TextInput, useDataProvider, useNotify, useRedirect } from 'react-admin';
import { CompoundIndicator } from './your-types'; // 替换成你的类型定义路径

export const SourceMeasurementProtocolUpdateDescription = () => {
  const dataProvider = useDataProvider();
  const notify = useNotify();
  const redirect = useRedirect();

  // 自定义保存逻辑，提交到目标资源
  const handleSave = async (values) => {
    try {
      // 根据后端接口选择create或update，这里假设是创建事件记录
      await dataProvider.create('event_source_measurement_protocol_description_updated', {
        data: {
          source_measurement_protocol_id: values.source_measurement_protocol_id,
          description: values.description
          // 若需要其他字段，可从values或当前记录中补充
        }
      });
      notify('描述更新成功');
      redirect('/source_measurement_protocol'); // 保存后重定向到原资源列表，可按需修改
    } catch (error) {
      notify('更新失败，请重试', { type: 'error' });
    }
  };

  return (
    <Edit resource="source_measurement_protocol">
      {/* 通过save属性替换默认保存逻辑 */}
      <SimpleForm save={handleSave}>
        <ReferenceInput
          source="source_measurement_protocol_id"
          reference="source_measurement_protocol"
        >
          <AutocompleteInput
            optionText={(record: CompoundIndicator) =>
              `${record.external_identifier} @ ${record.version}`
            }
            filterToQuery={(external_identifier) => ({ external_identifier })}
          />
        </ReferenceInput>
        <TextInput source="description" multiline />
      </SimpleForm>
    </Edit>
  );
};

关键说明 #

• Edit组件的resource属性：保持为source_measurement_protocol，确保表单能正确加载该资源的原始数据。
• SimpleForm的save属性：通过自定义函数覆盖默认的保存行为，将数据提交到目标资源event_source_measurement_protocol_description_updated。
• dataProvider方法选择：如果后端要求更新而非创建新记录，将create替换为update，并传入对应的id参数（例如id: values.id，需根据实际数据结构调整）。

内容的提问来源于stack exchange，提问作者dtm