Question

我使用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元素，但它可以做更复杂的事情。有没有人以前做过这个？感谢任何帮助！谢谢。

Answer 1

想出来＆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].limit或rule[0].source＆amp;的名称。正确地将对象嵌入数组中。

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

1 个答案: