如何创建 ReferenceInput 包装组件？

Question

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

我错过了什么？

我看到了答案但我不知道如何在这种情况下应用它

//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

现在问题是真实的吗？前段时间我是这样划分组件的：

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 组件文件

Answer 2

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

我们需要在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 下提供的那些。请参阅下面的使用部分。要了解将提供给任何组件的道具，请参阅下面的道具部分。

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

如何创建 ReferenceInput 包装组件？

How to create a ReferenceInput wrapped component?

admin-on-rest