react-admin:隔离中的 SimpleForm

Question

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

特别是表格。

但是，我很难弄清楚如何才能让我的表单甚至单个表单域独立工作。 (没有编辑、创建、资源和管理包装一切)。

我基本上想要的只是渲染一个带有单个 Input 的 SimpleForm 组件，以对我的每个输入进行原型(prototype)化。 (我使用自定义输入，因为我不喜欢 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 装饰器获得的 Prop 确实被调用。但值(value)永远不会改变。

然后我尝试模拟这个 SimpleForm 需要的每个 Prop ，如下所示:

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 包装 SimpleForm 和 react-admin 和 redux-form 组件期望的 store。用 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>
    )
}

您不需要真正的数据提供者。该资源用于 react 管理员而不是提示空管理员