react-admin：隔离中的SimpleForm

Question

作为Storybook的忠实拥护者，我想在Isolation中测试我的组件。

特别是形式。

但是，我很难弄清楚如何才能单独获得表单甚至单个表单字段。 （不包含所有内容的“编辑”，“创建”，“资源”和“管理”）。

我基本上想要的是渲染一个内部具有单个Input的SimpleForm组件，以制作每个输入的原型。 （我使用自定义输入，因为我不喜欢Material-ui）

我的输入用ra-core的addField修饰，例如textInput示例：

import React from 'react';
import { addField } from 'react-admin';
import sanitizeRestProps from './sanitizeRestProps';
import { Input } from 'antd';
import Labeled from './Labeled';

const TextInput = ({ id, label, labelPosition, input, isRequired, ...rest }) => (
    <Labeled label={label} position={labelPosition} id={id} isRequired={isRequired}>
        <Input id={id} {...input} {...sanitizeRestProps(rest)} />
    </Labeled>
);

export default addField(TextInput);

如果我尝试自行渲染此输入，则会收到错误消息“字段必须在用reduxForm（）装饰的组件内部”

这是公平的……当我在组件中构建它时，我还想测试它是否也可以工作，所以我添加了一个SimpleForm包装器。

例如：

return (
        <SimpleForm>
            <TextInput label={label} source="test" />
        </SimpleForm>
    );

该组件现在已呈现，但是我根本无法对其进行编辑。 input道具中的“ onChange”函数通过SimpleForm和addField装饰器得到调用。但是价值永远不会改变。

然后我尝试模拟此SimpleForm需要的每个道具，如下所示：

return (
        <SimpleForm
            resource="test"
            record={{ id: 1, test: 'blah' }}
            initialValues={{ test: 'test2' }}
            save={console.log}
            basePath="/test"
            saving={false}
            submitOnEnter={false}
            undoable={false}
            validate={() => true}
            version={1}
        >
            <TextInput label={label} source="test" />
        </SimpleForm>
    );

但是我的输入仍然是空的，我无法编辑它，并且它没有获得我在记录中设置的initialValue或默认值...

如果这真的需要一个Resource，Edit和Admin组件来呈现单个表单字段，这似乎很荒谬。

注意（不是我的字段坏了，当我加载整个站点时，它将IT与所有的Admin，Resources，Edit，Create等集成在一起。这些字段很好用。

但是必须加载网站，登录，导航等非常痛苦。每次我都对单个Input组件进行小的更改。

如何模拟那个环境，以便我可以单独测试表单？

我正在使用react-admin 2.8.5（在他们切换到react-final-form之前']

Answer 1

我发现起作用的最小设置是这个，它将不显示任何布局，并将直接重定向到输入：

import { Admin, Resource, Layout, SimpleForm, TextInput } from 'react-admin'

const NoLayout = props => (
    <Layout
        appBar={"span"}
        sideBar={"span"}
        menu={"span"}
        {...props}
    />
)

const Dashboard = props => (
    <SimpleForm>
        <TextInput source="test" label="Source Name"}/>
    </SimpleForm>
)

const App = () => {

    return (
        <Admin dataProvider={() => {}} menu={"span"} dashboard={Dashboard} layout={NoLayout}>
            <Resource name="test"/>
        </Admin>
    )
}

您不需要真正的dataProvider。该资源用于反应管理员，不会抱怨空管理员]