admin-on-rest 的包装器组件
Wrapper component for admin-on-rest
我想从 aor
创建一个包含 Inputs
和 Fields
的新组件,并在 <SimpleForm>
和 <TabbedForm>
中使用它,如下所示:
const WrapperComp = () => {
return (
<div>
<TextFieldLabel muiTheme={muiTheme}>Title Example</TextFieldLabel>,
<TextInput source="status"/>,
<TextField source="status"/>
</div>
)
}
<SimpleForm>
<WrapperComp />
</SimpleForm>
但我得到 Uncaught Error: The TextInput component wasn't called within a redux-form <Field>. Did you decorate it and forget to add the addField prop to your component?
。
如有任何帮助,我们将不胜感激。谢谢!
AOR SimpleForm 通过将 Redux-Form 道具传递到其子组件中来工作。由于您正在包装您的组件,因此这些道具不会传递给您需要的组件。您现在需要明确地执行此操作。所以像
const WrapperComp = (props) => {
return (
<div>
<TextFieldLabel {...props} muiTheme={muiTheme}>Title Example</TextFieldLabel>,
<TextInput {...props} source="status"/>,
<TextField {...props} source="status"/>
</div>
)
}
您需要使用 redux-form 中的 Field
来装饰您的 AOR 输入,并使用 AOR 中的 TextField 并按照 kunal pareek
的指示传递 {...props}
import React from 'react';
import {
LongTextInput,
ImageField,
ImageInput,
TextField
} from 'admin-on-rest';
import { Field } from 'redux-form';
const CustomGroupComp = (props) => (
<div>
<TextField source="status" {...props} />
<Field name="staffComment" component={LongTextInput} label="staffComment" {...props} />
<Field name="adminComment" component={LongTextInput} label="resources.faults.fields.adminComment" {...props} />
<Field multiple name="fileA" component={ImageInput} accept="image/*">
<ImageField source="path" title="title"/>
</Field>
</div>
);
export default CustomGroupComp;
我想从 aor
创建一个包含 Inputs
和 Fields
的新组件,并在 <SimpleForm>
和 <TabbedForm>
中使用它,如下所示:
const WrapperComp = () => {
return (
<div>
<TextFieldLabel muiTheme={muiTheme}>Title Example</TextFieldLabel>,
<TextInput source="status"/>,
<TextField source="status"/>
</div>
)
}
<SimpleForm>
<WrapperComp />
</SimpleForm>
但我得到 Uncaught Error: The TextInput component wasn't called within a redux-form <Field>. Did you decorate it and forget to add the addField prop to your component?
。
如有任何帮助,我们将不胜感激。谢谢!
AOR SimpleForm 通过将 Redux-Form 道具传递到其子组件中来工作。由于您正在包装您的组件,因此这些道具不会传递给您需要的组件。您现在需要明确地执行此操作。所以像
const WrapperComp = (props) => {
return (
<div>
<TextFieldLabel {...props} muiTheme={muiTheme}>Title Example</TextFieldLabel>,
<TextInput {...props} source="status"/>,
<TextField {...props} source="status"/>
</div>
)
}
您需要使用 redux-form 中的 Field
来装饰您的 AOR 输入,并使用 AOR 中的 TextField 并按照 kunal pareek
{...props}
import React from 'react';
import {
LongTextInput,
ImageField,
ImageInput,
TextField
} from 'admin-on-rest';
import { Field } from 'redux-form';
const CustomGroupComp = (props) => (
<div>
<TextField source="status" {...props} />
<Field name="staffComment" component={LongTextInput} label="staffComment" {...props} />
<Field name="adminComment" component={LongTextInput} label="resources.faults.fields.adminComment" {...props} />
<Field multiple name="fileA" component={ImageInput} accept="image/*">
<ImageField source="path" title="title"/>
</Field>
</div>
);
export default CustomGroupComp;