如何动态建立一个redux表单？

Question

我正在寻找学习如何动态构建Redux表单。想法是，名为componentDidMount的组件从服务器处获取项目列表，并将其插入商店store.my_items中：

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

现在这些项目都在商店中，我想为store.my_items中的每个项目构建一个带有字段的redux表单。

例如，其中一些动态创建：

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

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

谢谢

Answer 1

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

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' },
        ],
      },
    ]

现在，我只是遍历这些字段并为每个字段渲染输入，就像我在下面给出的 renderField 组件中所做的那样。我的一般表单组件如下所示：

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)

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

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

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

通过使用这种方法，我能够根据给定的类型重复使用模板。

如果有人有更好的动态创建表单的方法，那么我也想学习。

编辑：如果我们必须动态传递表单名称，则将需要进行少量更改：

export default reduxForm({})(SimpleForm)

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

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