how to create an entity inside another in the same form using admin-on-rest?

问题

I have Plants that have many Infos each.. I want to be able to edit/create a Plant and create adhoc an Info attached to it..

Here is how I have built the PlantEdit and PlantCreate:

export const PlantEdit = (props) => (
    <Edit title={<PlantTitle />} {...props}>
        <SimpleForm>
            <TextInput source="name"/>
        </SimpleForm>
    </List>
    </Edit>
);

export const PlantCreate = (props) => (
    <Create {...props}>
        <SimpleForm>
            <TextInput source="name"/>
        </SimpleForm>
    </Create>
);

here is the InfoCreate function - it has a suggestion menu to lookup one of the plants that already exist:

export const InfoCreate = (props) => (
    <Create {...props}>
        <SimpleForm>
            <TextInput source="name"/>
        </SimpleForm>
        <ReferenceArrayInput label="Info" source="plantId" reference="plants">
                <SelectArrayInput optionText="name" translate={false}/>
            </ReferenceArrayInput>
    </Create>
);

Those work independently.. but I would like to combine them during create/edit of Plant so it creates Info at the same time.. so in other words the plant id is "attached" to Info while I create it through Plant edit/create form. I was thinking of a popup that creates a temp Info and when it is submitted it is persisted to the database.

Here is the App configuration:

const App = () => (
    <Admin
        theme={getMuiTheme(customTheme)}
        title={<img src="imageserver/logo.png" alt="logo" width="120" height="auto" />}
        restClient={delayedRestClient}
        // restClient={jsonServerRestClient('http://localhost/plants/web/api/v1')}
        loginPage={Login}
        authClient={authClient}
        appLayout={Layout}
        dashboard={Dashboard}
        customRoutes={customRoutes}
        menu={Menu}
        messages={translations}
    >
        <Resource name="plants" list={PlantList} icon={PlantIcon} create={PlantCreate} edit={PlantEdit} />
        <Resource name="infos" list={InfoList} icon={InfoIcon} create={InfoCreate} edit={InfoEdit}  />
    </Admin>
);

export default App;

how can this be handled?

I tried importing those functions and I had issues with import/export so that doesn't work. I also tried just using the internals and copy paste them in the other form (without knowing how to pass the id from the child to the parent) but I got infinite loop when navigating to the parent form..

Thanks in advance!

来源：https://stackoverflow.com/questions/45918638/how-to-create-an-entity-inside-another-in-the-same-form-using-admin-on-rest

标签

reactjs

admin-on-rest