react-admin - 在创建视图中添加多条记录

问题描述

我正在尝试在 react-admin 创建视图中一次创建多个帖子。它类似于一对多，一个作者可以在 react-admin 的 Create 组件中一次创建多个帖子。我在使用 TabbedForm 时没有找到工作方法。原因是当您填写单个字段时，它会在另一个 TabbedForm 上自动完成，因为 TextInput 与相同的源名称相关。我想了解如何使用 react-admin Tabs 处理多个表单输入，而无需渲染输入两次。

这是源代码

import * as React from "react";
import { 
  List,Create,ArrayInput,SimpleFormIterator,TextInput,DateInput,Datagrid,TextField,DateField,Admin,Resource,TabbedForm,FormTab
  } 
from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

//read ops
export const PostList = (props) => (
    <List {...props}>
        <Datagrid>
            <TextField source="id" />
            <TextField source="title" />
            <TextField source="body" />
            <DateField source="published_at" />
        </Datagrid>
    </List>
);

//create ops
export const PostCreate = (props) => (
  <Create {...props}>
  <TabbedForm>
      <FormTab label="single Post">         
          <TextInput variant="outlined" source="title" />
          <TextInput variant="outlined" source="body" options={{ multiLine: true }} />
          <DateInput variant="outlined" label="Publication date" source="published_at" defaultValue={new Date()} />
      </FormTab>
      <FormTab label="Multiple Post">
          <TextInput variant="outlined" source="title" />
          <TextInput variant="outlined" source="body" options={{ multiLine: true }} />
          <DateInput variant="outlined" label="Publication date" source="published_at" defaultValue={new Date()} />
          <ArrayInput source="posts">
              <SimpleFormIterator>
                <TextInput variant="outlined" label="title" source="title" />
                <TextInput variant="outlined" label="body" source="teaser" />
                <DateInput variant="outlined" label="Publication date" source="published_at" />
              </SimpleFormIterator>
          </ArrayInput>
      </FormTab>

  </TabbedForm>
</Create>
);



//main
const App = () => (
    <Admin title="ubeezy blog" dataProvider={jsonServerProvider('https://jsonplaceholder.typicode.com')}>
        <Resource name="posts" list={PostList} create={PostCreate} />
    </Admin>
);

export default App;

PostCreate 组件在这里是相关的，因为我有 Single 和 Multiple 帖子创建，在创建单个帖子时，它会获取输入详细信息并反映在多个帖子创建选项卡字段上.

codesandbox 的交互式演示：

https://codesandbox.io/s/ra-multiple-form-creation-1ecmi?file=/src/App.js

非常感谢您的帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）