How to create a ReferenceInput wrapped component?

问题:

I'm trying to create a wrap component that includes admin-on-rest ReferenceInput

What am I missing?

I have seen the answer Error on Creating custom ReferenceInput with separate component but I do not know how to apply it in this case

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

回答1:

I found a (the?) solution.

We need to use a redux-form Field component in Simpleform.

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

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

The Field component is how you connect each individual input to the Redux store. There are three fundamental things that you need to understand in order to use Field correctly:

The name prop is required. It is a string path, in dot-and-bracket notation, corresponding to a value in the form values. It may be as simple as 'firstName' or as complicated as contact.billing.address[2].phones[1].areaCode.

The component prop is required. It may be a Component, a stateless function, or a factory, like those provided under React.DOM. See Usage section below. To learn about the props that will provided to whatever your component is, see the Props section below.

All other props will be passed along to the element generated by the component prop.

回答2:

is question actual now? Some time ago I divided component this way:

1) create file DescriptionField.js

2) write code into it

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

(maybe it can be simple). Maybe you forgot export ?

3) and in parent component call it:

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

You can try to do it the same method. Please write your code Prueba component file here