如何动态构建redux表单? [英] How to dynamically build a redux form?

问题描述

我正在学习如何动态构建 redux-form.想法是，称为 componentDidMount 的组件从服务器获取项目列表并将它们插入商店 store.my_items:

{'item1', 'itemB', 'itemZZZ' 等...}

既然这些商品都在商店中，我想为 store.my_items 中的每个商品构建一个带有字段的 redux-form.

例如，其中几个是动态创建的:

 
<label>ItemXXX</label><div><标签><Field name="ItemXXX" component="input" type="radio" value="1"/>{' '}1<标签><Field name="ItemXXX" component="input" type="radio" value="2"/>{' '}2

使用 react、redux-form，构建这种动态 redux 表单的正确方法是什么?

谢谢

解决方案

我正在遵循这种动态构建表单的方法.我只是声明表单字段的元数据(类型、占位符、每个字段的唯一名称等)，如下所示:

const 字段 = [{ name: 'name', type: 'text', placeholder: 'Enter Name' },{ name: 'age', type: 'number', placeholder: 'Enter age' },{ name: 'email', type: 'email', placeholder: 'Enter Email' },{名称:'就业'，类型:'复选框'}，{name: '最喜欢的颜色',类型:'选择'，选项: [{标签:'红色'，值:'红色'}，{标签:'黄色'，值:'黄色'}，{标签:'绿色'，值:'绿色'}，],},]

现在，我只是迭代这些字段并为每个字段渲染输入，就像我在下面给出的 renderField 组件中所做的那样.我的通用表单组件如下所示:

从 'react' 导入 Reactimport { Field, reduxForm } from 'redux-form/immutable'const renderField = ({ input, field }) =>{const { 类型，占位符 } = 字段if (type === 'text' || type === 'email' || type === 'number' || type === 'checkbox') {return } else if (type === '选择') {const { 选项 } = 字段返回 (<select name={field.name} onChange={input.onChange}>{options.map((option, index) => {return <option key={index} value={option.value}>{option.label}</option>})}</选择>)} 别的 {返回 
 类型不受支持.
}}const SimpleForm = ({ handleSubmit, fields }) =>{返回 (<div>{fields.map(field => (<div key={field.name}><字段名称={field.name}组件={renderField}字段={字段}/>

))}<div onClick={handleSubmit}>提交</div>

)}导出默认 reduxForm({形式:'简单形式'})(简单的模式)

并将字段传递给 SimpleForm 组件，如下所示:

{}}/>

现在您可以选择从服务器获取这样的字段，或者只想获取项目并在前端创建这样的字段(通过将项目作为字段的名称传递).

通过使用这种方法，我可以根据给定的类型重复使用模板.

如果有人有更好的方法来动态制作表单，那么我也很想学习.

如果我们必须动态传递表单名称，则需要进行一些小的更改:

导出默认 reduxForm({})(SimpleForm)

我们可以传递表单名称，而这个组件是这样的:

I'm looking to learn how to dynamically build a redux-form. Idea being, the component called, componentDidMount goes at fetches a list of items from the server and inserts them in the store, store.my_items:

{'item1', 'itemB', 'itemZZZ', etc...} 

Now that these items are in the store, I want to build the redux-form with a Field for each item in store.my_items.

Example, several of these dynamically created:

      <div>
        <label>ItemXXX</label>
        <div>
          <label>
            <Field name="ItemXXX" component="input" type="radio" value="1" />
            {' '}
            1
          </label>
          <label>
            <Field name="ItemXXX" component="input" type="radio" value="2" />
            {' '}
            2
          </label>
        </div>
      </div>

With react, redux-form, what would be the right way to approach building this type of dynamic redux form?

Thank you

解决方案

I am following this approach for building a form dynamically. I am just declaring metadata of form fields (type, placeholder, the unique name of each field, etc.) like this:

const fields = [
      { name: 'name', type: 'text', placeholder: 'Enter Name' },
      { name: 'age', type: 'number', placeholder: 'Enter age' },
      { name: 'email', type: 'email', placeholder: 'Enter Email' },
      { name: 'employed', type: 'checkbox' },
      {
        name: 'favouriteColors',
        type: 'select',
        options: [
          { label: 'Red', value: 'red' },
          { label: 'Yellow', value: 'yellow' },
          { label: 'Green', value: 'green' },
        ],
      },
    ]

Now, I am just iterating over these fields and rendering input for each field like the way I have done in renderField component given below. My general form component looks like this:

import React from 'react'
import { Field, reduxForm } from 'redux-form/immutable'

const renderField = ({ input, field }) => {
  const { type, placeholder } = field
  if (type === 'text' || type === 'email' || type === 'number' || type === 'checkbox') {
    return <input {...input} placeholder={placeholder} type={type} />
  } else if (type === 'select') {
    const { options } = field
    return (
      <select name={field.name} onChange={input.onChange}>
        {options.map((option, index) => {
          return <option key={index} value={option.value}>{option.label}</option>
        })}
      </select>
    )
  } else {
    return <div>Type not supported.</div>
  }
}

const SimpleForm = ({ handleSubmit, fields }) => {
  return (
    <div>
      {fields.map(field => (
        <div key={field.name}>
          <Field
            name={field.name}
            component={renderField}
            field={field}
            />
        </div>
      ))}
      <div onClick={handleSubmit}>Submit</div>
    </div>
  )
}

export default reduxForm({
  form: 'simpleForm'
})(SimpleForm)

and passing fields to SimpleForm component like this:

<SimpleForm fields={fields} onSubmit={() =>{}}/>

Now it's your choice that you want to fetch fields like this from the server or just want to fetch only items and make fields like this (by passing item as the name of field) on the frontend.

By using this approach, I am able to re-use template based on given type.

If someone has a better approach to make a form dynamically, then I would love to learn that too.

Edit: If we have to pass form name dynamically, then a small change will be required:

export default reduxForm({})(SimpleForm)

and we can pass form name while this component like this:

<SimpleForm form={'simpleForm'} fields={fields} onSubmit={() =>{}} />

这篇关于如何动态构建redux表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！