Question

我想创建一个包含来自Inputs的{{1}}和Fields的新组件，并在aor和<SimpleForm>中使用它，如下所示：

<TabbedForm>

const WrapperComp = () => {
  return (
    <div>
      <TextFieldLabel muiTheme={muiTheme}>Title Example</TextFieldLabel>,
      <TextInput source="status"/>,
      <TextField source="status"/>
    </div>
  )
}

但我得到<SimpleForm> <WrapperComp /> </SimpleForm>。

任何帮助将不胜感激。谢谢！

Answer 1

您需要使用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;

Answer 2

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

用于管理休息的包装组件

2 个答案: