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

Question

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

我的 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:order，考虑到我希望城市首先出现在送货地址中，我如何使用 Mozilla React jsonschema 表单来做到这一点。

Answer 1

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

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