使用 Mozilla React 表单重新排序表单控件答案

【问题标题】：Reorder form controls using Mozilla React form使用 Mozilla React 表单重新排序表单控件
【发布时间】：2017-02-11 08:10:01
【问题描述】：

我正在尝试使用 Mozilla 的 react-jsonschema form。

我的 jsonschema 为

{
  "definitions": {
    "address": {
      "type": "object",
      "properties": {
        "street_address": {
          "type": "string"
        },
        "city": {
          "type": "string"
        },
        "state": {
          "type": "string"
        }
      },
      "required": [
        "street_address",
        "city",
        "state"
      ]
    },
    "node": {
      "type": "object",
      "properties": {
        "name": {
          "type": "string"
        },
        "children": {
          "type": "array",
          "items": {
            "$ref": "#/definitions/node"
          }
        }
      }
    }
  },
  "type": "object",
  "properties": {
    "billing_address": {
      "title": "Billing address",
      "$ref": "#/definitions/address"
    },
    "shipping_address": {
      "title": "Shipping address",
      "$ref": "#/definitions/address"
    },
    "tree": {
      "title": "Recursive references",
      "$ref": "#/definitions/node"
    }
  }
}

UiSchema 为

{
  "ui:order": [
    "shipping_address",
    "billing_address",
    "tree"
  ]
}

使用 reorder 我可以控制 ui 上控件的顺序，但由于送货地址有街道地址、城市和州。如何控制这些控件的 ui:order，考虑我希望城市首先出现在送货地址中，我该如何使用 Mozilla React jsonschema 表单来做到这一点。

【问题讨论】：

标签： javascript reactjs jsonschema

【解决方案1】：

您可以在送货地址级别添加订单。

{
  "shipping_address": {
    "ui:order": [
      "city",
      "*"
    ]
  },
  "ui:order": [
    "shipping_address",
    "billing_address",
    "tree"
  ]
}

【讨论】：

【解决方案2】：

试试@ver01/form here

使用架构：

{
"definitions": {
    "address": {
        "type": "object",
        "properties": {
            "street_address": {
                "title": "street_address",
                "type": "string"
            },
            "city": {
                "title": "city",
                "type": "string"
            },
            "state": {
                "title": "state",
                "type": "string"
            }
        },
        "required": [
            "street_address",
            "city",
            "state"
        ]
    },
    "node": {
        "type": "object",
        "properties": {
            "name": {
                "title": "name",
                "type": "string"
            },
            "children": {
                "title": "children",
                "type": "array",
                "items": {
                    "$ref": "#/definitions/node"
                }
            }
        }
    }
},
"type": "object",
"properties": {
    "billing_address": {
        "title": "Billing address",
        "$ref": "#/definitions/address"
    },
    "shipping_address": {
        "title": "Shipping address",
        "$ref": "#/definitions/address",
        "$vf_opt": {
            "option": {
                "order": [
                    "city",
                    "*"
                ]
            }
        }
    },
    "tree": {
        "title": "Recursive references",
        "$ref": "#/definitions/node"
    }
},
"$vf_opt": {
    "option": {
        "order": [
            "shipping_address",
            "billing_address",
            "tree"
        ]
    }
}

【讨论】：

请添加一些关于您修复的内容以及您在代码中修复问题的位置的说明。
只要给这个订单要求另一个表单解决方案