홈>2020-02-01 00:38

reactjs - 반응 네이티브 - 객체 배열을 사용하여 tcomb-form으로 양식을 동적으로 생성

다수의 객체를 통해 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"},
      ]
    }

이 결과는 몽고에 저장됩니다. 누군가 나를 도와 주시고 미리 감사드립니다.

답변 # 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;
    })
}

Python2.net

reactjs - 반응 네이티브 - 객체 배열을 사용하여 tcomb-form으로 양식을 동적으로 생성

관련 자료