【问题标题】:Pass existing record record/value to Create Component将现有记录记录/值传递给创建组件
【发布时间】:2018-05-15 21:50:57
【问题描述】:

我们想知道如何将现有/选定的记录从列表传递到 react admin 中的创建视图。

我们的列表视图中的每个条目都有一个编辑和创建按钮。我们希望能够为所述行单击“创建”,并能够在“创建”中显示该行/记录信息。我知道这听起来与编辑它没有什么不同,但我们希望能够从现有功能中复制/创建。如果我们只是使用普通的创建视图,我们需要从头开始填写信息。在某些情况下,我们希望在预先存在的数据之上创建。

我们问这个问题的另一个原因是 react-admin 文档明确指出:

接受记录道具,以基于值对象初始化表单。

我们假设您可以将您选择的记录传递给创建,我们已经尝试过,但它似乎不起作用。

任何帮助表示赞赏,谢谢。

这就是我的想法:

export const DataCreate = (props) => (
  <Create title="Create new " {...props} >
    <TabbedForm record={props.record} 
    //can we do something like this to pass record to create?> 
    <FormTab label = "Basic Info">
    <TextInput source="type" label="type" />

【问题讨论】:

  • 您好,请发布您迄今为止尝试过的代码示例
  • 这里是一个例子:\n `export const DataCreate = (props) => (
  • 您是否正在重定向到创建页面?

标签: reactjs admin-on-rest react-admin


【解决方案1】:

我们最近更新了此用例的文档:https://marmelab.com/react-admin/CreateEdit.html#prefilling-a-create-record

这是一个例子:

创建组件

const commentDefaultValue = { nb_views: 0 };

export const CommentCreate = ({ location, ...props }) => (
    <Create
        record={(location.state && location.state.record) || defaultValue}
        location={location}
        {...props}
    >
        <SimpleForm>
            <TextInput source="author" />
            <RichTextInput source="body" />
            <NumberInput source="nb_views" />
        </SimpleForm>
    </Create>
);

创建按钮

import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';

const CreateRelatedCommentButton = ({ record }) => (
    <Button
        component={Link}
        to={{
            pathname: '/comments/create',
            state: { record: { post_id: record.id } },
        }}
    >
        Write a comment for that post
    </Button>
);

编辑:当版本2.2.0 发布时,将不再需要文档中解释的技术。 Create 将自动从位置状态或搜索中读取其默认值。见https://github.com/marmelab/react-admin/pull/1991。不过,您仍然需要自定义按钮

【讨论】:

  • 虽然此链接可能会回答问题,但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改,仅链接答案可能会失效。 - From Review
  • 我会尽快包含一个代码示例。感谢您的评论:)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多