用于 admin-on-rest 的包装组件

IT技术 reactjs admin-on-rest
2021-05-17 02:00:53

我想创建一个包含一个新的组件Inputs，并Fields从aor在使用它<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?。

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

2个回答

您需要使用Fieldfrom redux-form 来装饰您的 AOR 输入并使用来自 AOR 的 TextField 并{...props}按照kunal pareek的指示传递

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 SimpleForm 通过将 Redux-Form props 传递到它的子组件来工作。由于您正在包装组件，因此这些props不会传递给您需要的组件。您现在需要明确地执行此操作。所以像

const WrapperComp = (props) => {
  return (
    <div>
      <TextFieldLabel {...props} muiTheme={muiTheme}>Title Example</TextFieldLabel>,
      <TextInput {...props} source="status"/>,
      <TextField {...props} source="status"/>
    </div>
  )
}
其它你可能感兴趣的问题
上一篇如何使用 react-google-maps 库创建折线 下一篇React - 当同一组件有多个实例时，如何更改单个组件的状态？