在admin-on-rest中实施Redux Form FieldArray_Redux Form Field组件在FieldArray组件中的用法_redux form向导中的initialValues不适用于FieldArray - 腾讯云开发者社区

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

是指在使用admin-on-rest框架时，通过Redux Form的FieldArray组件来实现表单中的动态字段数组。

Redux Form是一个用于处理表单状态的库，它基于Redux的思想，提供了一种简单且可扩展的方式来管理表单数据。FieldArray是Redux Form提供的一个组件，用于处理表单中的动态字段数组，例如重复的输入框、复选框等。

实施Redux Form FieldArray的步骤如下：

安装admin-on-rest和redux-form依赖：

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

创建一个包含FieldArray的表单组件：

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

在上述代码中，我们创建了一个包含FieldArray的表单组件MyForm，并在资源组件PostList中使用该表单组件。通过FieldArray组件，我们可以动态地添加和删除字段，实现了表单中的动态字段数组功能。

admin-on-rest是一个基于React和Redux的开源框架，用于快速构建管理界面。它提供了丰富的组件和功能，使开发者能够轻松地创建数据驱动的管理界面。admin-on-rest还提供了与后端API的集成，使开发者能够方便地进行数据的增删改查操作。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云数据库MySQL版、腾讯云CDN等。您可以通过腾讯云官网了解更多关于这些产品的详细信息和使用指南。

腾讯云官网链接：https://cloud.tencent.com/