在admin-on-rest中实施Redux Form FieldArray

npm install admin-on-rest redux-form

import React from 'react';
import { render } from 'react-dom';
import { Admin, Resource } from 'admin-on-rest';
import { reducer as formReducer } from 'redux-form';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';

import { PostList } from './posts';

const rootReducer = combineReducers({
  form: formReducer,
});

const store = createStore(rootReducer);

const App = () => (
  <Provider store={store}>
    <Admin>
      <Resource name="posts" list={PostList} />
    </Admin>
  </Provider>
);

render(<App />, document.getElementById('root'));

import React from 'react';
import { Field, FieldArray } from 'redux-form';

const renderFields = ({ fields }) => (
  <div>
    {fields.map((field, index) => (
      <div key={index}>
        <Field name={field} component="input" type="text" />
        <button type="button" onClick={() => fields.remove(index)}>Remove</button>
      </div>
    ))}
    <button type="button" onClick={() => fields.push()}>Add Field</button>
  </div>
);

const MyForm = () => (
  <form>
    <FieldArray name="fields" component={renderFields} />
  </form>
);

export default MyForm;

import React from 'react';
import { List, Datagrid, TextField } from 'admin-on-rest';

import MyForm from './MyForm';

export const PostList = (props) => (
  <List {...props}>
    <Datagrid>
      <TextField source="id" />
      <MyForm />
    </Datagrid>
  </List>
);