如何解决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 举报,一经查实,本站将立刻删除。