Question

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

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

现在这些商品都在商店中，我想为store.my_items中的每个商品构建一个带有Field的redux-form。

示例，其中一些是动态创建的：

      <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={() =>{}}/>

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

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

如果某人有更好的动态制作表单的方法，那么我也想学习它。

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

export default reduxForm({})(SimpleForm)

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

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

Answer 2

你可以创建一个组件表单并在.map()函数中使用它并将formName作为这样的道具传递...

render() {
 return(
   <div>
     {yourDataFromServer.map((item, index) => 
      <ReduxFormComp
        form={`${FORM_NAMES.SIMPLE_FORM}__${index}`}
        initialValues={item}
      />
    )}
   </div>
);
}

注意：当您使用initialValues初始化表单时，所有字段名称都应该等于您的数据。

如何动态构建redux表单？

2 个答案: