Question

我通过一系列对象创建了一个tcomb-form，但我没有很多经验，老实说，我正在努力争取它。

这是我们将要使用的数组结构：

export const AUDIT_CONTENT = 
  [
    {type: "label", style: "title", group: "4.1", text: "field text here"}, 
    {type: "label", style: "label", group: "4.1", text: "field text here"},
    {type: "multi-checkbox", style: "checkbox", group: "4.1", text: "field text here"},
    {type: "multi-checkbox", style: "checkbox", group: "4.1", text: "field text here"},
    {type: "multi-checkbox", style: "checkbox", group: "4.1", text: "field text here"},
    {type: "label", style: "label", group: "4.1", text: "field text here"},
    {type: "multi-checkbox", style: "checkbox", group: "4.1", text: "field text here"}
  ]

type: label的字段是要存储字段type: multi-checkbox的对象，这些字段是要验证的字段。我按组对这些字段进行分组，因此组4.1的所有字段都在一个数组中，包含组4.1的字段也是如此。

我设法通过执行以下操作动态生成这些字段：

myFields = () => {
  for (var c = 0; c < groupedFields.length; c++) {
    for (var i = 0; i < groupedFields[c].length; i++ ) {
      if (groupedFields[c][i].type === 'multi-checkbox') {
        fields[groupedFields[c][i].text] = t.maybe(t.enums({
                OPTION_1 : "OPTION 1 Label",
                OPTION_2 : "OPTION 2 Label",
                OPTION_3 : "OPTION 3 Label",
                OPTION_4 : "OPTION 4 Label"
        }));
      }
    }
  }
}
var fields = {};
myFields()
var myFormType = t.struct(fields);

现在我的问题从这里开始。我只生成接收值的字段，在这种情况下是type: multi-checkbox的字段，但是，我还想在我的表单中以type: label的形式动态呈现与我的AUDIT_CONTENT数组与那些是对象，所以结果将是这样的：

    "Field with style title": {
      "Field with style label": [
         {"Field with style multi-checkbox": "OPTION_1"},
         {"Field with style multi-checkbox": "OPTION_3"},
      ],
      "Other field with style label": [
         {"Field with style multi-checkbox": "OPTION_4"},
         {"Field with style multi-checkbox": "OPTION_2"},
      ]
    }

此结果将存储在Mongo中。希望有人能帮助我解决这个问题并提前感谢。

Answer 1

如果您提供所需内容的直观表示会更好，但我认为您想要渲染和更新嵌套结构。为此我建议数组的递归映射方法。

/*
To render a structure like this you can use map and assign types to the objects to decide what to render 
But you should render it all.
Maybe you can use something like this:
*/
renderInputs(array){
    return array.map((obj) => {
        /* You can generate even nested forms if you want */
        if (obj.children) {
            return <div> {this.renderInputs()}</div>
        } else {
            return renderType(obj)
        }
    })
}

renderType(obj){
    switch (obj.type) {
        case 'label':
            return <Element  {...objProps} />
        case 'multi-checkbox':
            return <Element2 {...objProps} />
        /*You even can generate other methods for nested objects*/
        case 'other-case':
            return <div>{this.OtherSpecialSubRenderMethodIfYoUwANT()}</div>
    }
}

/**You will need an recursive method to update your state also and each object is recomended to have an unique id*/
updateState(array = this.state.array, newValue, id){
    return array.map((obj) => {
        if (obj.children) {
            return updateState(obj.children, newValue, id)
        }
        if (obj.id == id) {
            return { ...obj, value: newValue }
        }
        return obj;
    })
}

React-Native - 使用对象数组

1 个答案: