Question

我正在尝试创建一个包含admin-on-rest ReferenceInput

的wrap组件

我错过了什么？

我已经看到答案Error on Creating custom ReferenceInput with separate component但我不知道如何在这种情况下应用

//Works!!
export const commentsCreate = (props) => (
<Create title = "Create" {...props} >
    <SimpleForm>
        <ReferenceInput label="Posts" source="field" reference="posts"  allowEmpty {...props}>
            <AutocompleteInput optionText="name" {...props}/>
        </ReferenceInput>
    </SimpleForm>
</Create>
);

/*
Fail: 
ReferenceInput.js:303 Uncaught (in promise) TypeError: Cannot read property 'value' of undefined
at Function.mapStateToProps [as mapToProps] (ReferenceInput.js:303)
at mapToPropsProxy (wrapMapToProps.js:43)
.......
*/ 
export const commentsCreate = (props) => (
<Create title = "Create" {...props} >
    <SimpleForm>
        <Prueba {...props} />
    </SimpleForm>
</Create>
);

const Prueba = (props) => (
    <ReferenceInput label="Posts" source="field" reference="posts"  allowEmpty {...props}>
        <AutocompleteInput optionText="name" {...props}/>
    </ReferenceInput>
);

Answer 1

我找到了一个（？）解决方案。

我们需要在Simpleform中使用redux-form Field组件。

  import { Field } from 'redux-form';

  export const commentsCreate = (props) => (
    <Create title = "Create" {...props} >
      <SimpleForm>
        <Field name="field" component={Prueba} {...props} />
      </SimpleForm>
    </Create>
  );

  const Prueba = (props) => (
    <ReferenceInput label="Posts" source="field" reference="posts"  allowEmpty {...props}>
      <AutocompleteInput optionText="name" {...props}/>
    </ReferenceInput>
  );

来自https://redux-form.com/6.0.0-alpha.4/docs/api/field.md/

Field组件是您将每个输入连接到Redux商店的方式。为了正确使用Field，您需要了解三个基本内容：

名称道具是必需的。它是一个字符串路径，以点括号表示，对应于表单值中的值。它可能像'firstName'一样简单，也可能像contact.billing.address [2] .phones [1] .areaCode那样复杂。

需要组件道具。它可能是组件，无状态函数或工厂，如React.DOM中提供的那些。请参阅下面的使用部分要了解将为您的组件提供的道具，请参阅下面的道具部分。

所有其他道具将传递给组件道具生成的元素。

Answer 2

现在有问题吗？前段时间我以这种方式划分组件：

1）创建文件DescriptionField.js

2）将代码写入其中

import React from 'react';
export const DescriptionField = ({ source = "Description" }) => <span><p/><p/>{source}<p/></span>;
export default DescriptionField;

（也许它可以很简单）。也许你忘记了export？

3）并在父组件中调用它：

export const SomeMyCreate = (props) => (
  <Create {...props}>
    <SimpleForm>
      .....
      <DescriptionField source="Warn! Only one picture may be here!"/>
    </SimpleForm>
  </Create>
);

您可以尝试使用相同的方法。请在此处编写代码Prueba组件文件

如何创建一个ReferenceInput包装组件？

2 个答案: