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

Question

我正在尝试使用 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"
  ]
}

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

Answer 1

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

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

Answer 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"
        ]
    }
}

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

Reorder form controls using Mozilla React form

javascript

jsonschema

reactjs