redux-form:<fieldarray> + <formsection>用于复杂的对象数组

时间:2018-02-08 21:24:14

标签: javascript forms reactjs redux redux-form

我使用redux-form尝试创建一个导致对象数组的表单,例如:

const formData = {
  //...
  rules: [
    {
      level: 1,
      source: 'some source',
      //...
    }, {
      level: 3,
      source: 'another source'
      //...
    }
  ]
}

似乎我应该可以使用FormSection组件下一个FieldArray下一个...但我无法使其正常工作。这是我目前的尝试:

const renderRules = ({ fields, meta: { error } }) => (
  <div>
    <Button
      text="Add Rule"
      onClick={e => {
        e.preventDefault()
        fields.push()
      }}
    />
    {fields.map((rule, index) => (
      <FormSection name="rule"} key={index}>
        <legend>Rule {index + 1}</legend>
        <Field name="level" component={Select} label="Level">
            <Option value={1}>Level 1</Option>
            <Option value={2}>Level 2</Option>
            <Option value={3}>Level 3</Option>
        </Field>
        <Field name="source" component={Input} label="Source" />
      </FormSection>
    ))}
  </div>
)

但是这不起作用:(因为所有值都放在rule键下,而不是rules数组中的对象。有没有人以前做过这个?我能找到的所有例子FieldArray仅使用一个Field元素,但它可以做更复杂的事情。有没有人以前做过这个?感谢任何帮助!谢谢。

1 个答案:

答案 0 :(得分:6)

想出来&amp;我发帖给遇到这个问题的其他人。不要使用FormSection&amp;在为数组中的每个字段分配名称时使用rule参数,如下所示:

const renderRules = ({ fields, meta: { error } }) => (
  <div>
    <Button
      text="Add Rule"
      onClick={e => {
        e.preventDefault()
        fields.push()
      }}
    />
    {fields.map((rule, index) => (
      <legend>Rule {index + 1}</legend>
      <Field name={`${rule}.level`} component={Select} label="Level">
          <Option value={1}>Level 1</Option>
          <Option value={2}>Level 2</Option>
          <Option value={3}>Level 3</Option>
      </Field>
      <Field name={`${rule}.source`} component={Input} label="Source" />
    ))}
  </div>
)

这为Field提供了rule[0].limitrule[0].source&amp;的名称。正确地将对象嵌入数组中。