javascript – redux-form：用于复杂的对象数组

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – redux-form：用于复杂的对象数组，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1598字，纯文字阅读大概需要3分钟。

内容图文

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

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

看起来我应该能够使用FieldArray组件下一个多个FormSections …但我无法使它工作.这是我目前的尝试：

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

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

解决方法:

想出来&我发帖给遇到这个问题的其他人.不要使用FormSection&在为数组中的每个字段指定名称时使用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&的名称.正确嵌套数组中的对象.

内容总结

以上是互联网集市为您收集整理的javascript – redux-form：用于复杂的对象数组全部内容，希望文章能够帮你解决javascript – redux-form：用于复杂的对象数组所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端