react-admin：隔离中的 SimpleForm

Question

作为 Storybook 的忠实粉丝，我喜欢在隔离中测试我的组件。

特别是表格。

然而，我很难弄清楚如何让我的表单甚至单个表单字段单独工作。（没有编辑、创建、资源和管理包装所有内容）。

我基本上想要的只是渲染一个带有单个输入的 SimpleForm 组件，以对每个输入进行原型设计。（我使用自定义输入，因为我不喜欢 Material-ui）

我的输入是用 addField 装饰的，ra-core就像这个 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通过 SimpleForm 和 addField 装饰器获取的 prop中的“onChange”函数确实被调用。但价值永远不会改变。

然后我尝试模拟这个 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>
    );

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

如果这真的需要资源、编辑和管理组件来呈现单个表单字段，这似乎很荒谬。

注意（这不是我的字段被破坏了）当我加载完整的站点时，它与所有管理、资源、编辑、创建等集成。这些字段工作得很好。

但每次我都要对单个输入组件进行一些小的更改时，加载网站、登录、导航等都是一个巨大的痛苦。

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

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

Answer 1

编辑：只需使用react-redux Provider 和react-admin 和redux-form 组件期望的存储来包装SimpleForm 即可。使用2.8.5测试

import React from "react";
import { render } from "react-dom";
import { SimpleForm, TextInput } from "react-admin";
import { Provider } from "react-redux";
import { createStore, combineReducers } from "redux";
import { reducer as formReducer } from "redux-form";

const reducers = {
  admin: (state = {}) => state,
  form: formReducer
};

const store = createStore(combineReducers(reducers));

const App = () => (
  <Provider store={store}>
    <SimpleForm record={{ test: "test2" }}>
      <TextInput label="label" source="test" />
    </SimpleForm>
  </Provider>
);

render(<App />, document.getElementById("root"));

在这里测试一下：

https://codesandbox.io/s/react-final-form-submission-errors-example-jfd5k?file=/index.js:0-647

旧答案：

我发现有效的最小设置是这样的，它将不显示布局，并将直接重定向到输入：

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>
    )
}

您不需要真正的数据提供者。该资源用于反应管理员，不要抱怨空管理员